convirtiendo el script jQuery para div id para bucle de clases div

La secuencia de comandos a continuación aplica colores aleatorios de una matriz a una identificación de división y cambia los colores al pasar el mouse. Me gustaría modificarlo para que recorra una clase div y aplique colores aleatorios a todas las clases en una página. Obviamente, las funciones de clic tendrían que ser realizadas por id, pero imagino que hay una forma de recorrer las clases div de modo que todas tengan diferentes colores aleatorios que cambian al pasar el mouse.

¿Alguien podría ayudar con esto?

Muchas Gracias

Nick

$(document).ready(function() {
  var test = $("#example").text().split('');

    var normal = generateColors(test);
    var hover = generateColors(test);
    $("#example").html(normal);

    $("#example").hover( 
      function(event) { $("#example").html(hover) }, 
      function(event) { $("#example").html(normal) });

    $("#example").click(function() { 
    location.href = "http://www.google.co.uk"; 
    });

});

function generateColors(characters) {
    var result = "";
    var i = 0;
    for(i=0; i < characters.length; i++) {
        result += "<span style='color:"+getColor()+"'>"+characters[i]+"</span>";
    }

   return result;
}        

function getColor() {
    var colList = ['#7EA404', '#14AFB0','#B05718', '#B0A914', '#B01617','#902BB0', '#B003A2', '#4A429C','#33821E', '#226795', '#D0B600','#886833'];

    var i = Math.floor((Math.random()*colList.length));
  return colList[i];
}

preguntado el 03 de mayo de 12 a las 19:05

3 Respuestas

Para aplicar los colores, y almacenarlos en los diferentes elementos, podrías hacer:

$(".example").each(function() {
    var text = $(this).text().split(''),
        normal = generateColors(text),
        hover = generateColors(text);

    $(this).html(normal).data('hover', hover).data('normal', normal);
});

$(".example").hover( 
    function() {
        $(this).html($(this).data('hover'));
    }, 
    function() { 
        $(this).html($(this).data('normal'));
});

Configurar cada enlace con location.href al hacer clic parece una muy mala idea, pero depende de usted.

contestado el 03 de mayo de 12 a las 19:05

Gracias, es justo lo que estaba buscando. La razón por la que establecí los enlaces con jQuery fue que los href dentro de un div no funcionaban. Sin embargo, ahora me doy cuenta de que si agrego la clase "ejemplo" al enlace, funciona. ¡Gracias! - Nick

Sí, puedes usar <a> elementos en su lugar, y funcionará de la misma manera, como ahora te has dado cuenta. Feliz de ayudar ! - adeneo

Obviamente, las funciones de clic tendrían que ser realizadas por id.

No estoy seguro de por qué sería eso.

Puede aplicar una función de clic a la matriz de objetos jQuery a través de una clase si lo desea:

$('.myDivs').click(...)

contestado el 03 de mayo de 12 a las 19:05

¿Si las URL son diferentes para cada div? - Nick

¿Está asignando direcciones URL a cada div individual a través de jQuery? Sugeriría almacenar las direcciones URL en atributos de datos *, pero no estoy completamente seguro de cuál es su objetivo. - DA.

Ese es el método que estaba usando, como puede ver arriba, con la identificación DIV única. Simplemente busco aplicar los efectos de color a varios DIV/enlaces en una página. El efecto de color aleatorio sería el mismo, pero cada uno se vincularía a una página diferente. - Nick

Dividir la lógica. Asigne URL a través de una función, luego asigne los colores aleatorios a través de otra. Para los colores aleatorios, solo dé a cada div la misma clase y recupérelos todos a través de la clase. - DA.

estas buscando algo como

$('div').each(function(){
  //code
})

contestado el 03 de mayo de 12 a las 19:05

Baja calidad y no muy específico para responder a la pregunta tal como se le preguntó. (demasiado genérico) - sg3s

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.