jQuery:agregando 5 identificaciones sobre la marcha (en lugar de clases)

Question

Estoy lidiando con esta situación:

• Tengo un script de animación en color que apunta por identificación (no es JQuery sino javascript puro)
• entonces tengo una lista dinámica sin identificadores:'ul' algunos elementos de la lista de lanzamiento de PHP '/ul'
• y finalmente tengo JQuery (que usaré para agregar varios identificadores sobre la marcha a los elementos de la lista:pero todavía no sé cómo)

Me di cuenta de que no podía agregar, con JQuery, clases individuales a los elementos de la lista, ya que el complemento de color solo busca por identificación (usa getElementById, que no tiene paralelo con las clases).

Debo excluir entonces la función addClass JQ, que sería bastante fácil de poner en funcionamiento.

El script solo funcionaría si pudiera insertar identificadores en la lista, 5 identificadores bien definidos, y luego dar algunas instrucciones en el complemento de color externalizado para afectarlos:

<ul>
     <li><a href="" id="ontheflyone">pulled from the DB</a></li>
     <li><a href="" id="ontheflytwo">pulled from the DB</a></li>
     <li><a href="" id="ontheflythree">pulled from the DB</a></li>
     <li><a href="" id="ontheflyfour">pulled from the DB</a></li>
     <li><a href="" id="ontheflyfive">pulled from the DB</a></li>
</ul>

Luego, las instrucciones:

document.getElementById(’id’).onmouseover = function() { 'ontheflyone','text','$color1' };
document.getElementById(’id’).onmouseout = function() { 'ontheflyone','text','$color2'};

document.getElementById(’id’).onmouseover = function() { 'ontheflytwo','text','$color1' };
document.getElementById(’id’).onmouseout = function() { 'ontheflytwo','text','$color2'};

etc.

Podría cambiar el javascript del complemento, pero pensé que sería más fácil usar JQuery para agregar, de alguna manera, identificadores en mi html.

El complemento de color es un increíble código escrito por Michael LeigeberReproduzco lo siguiente:

// main function to process the fade request //
function colorFade(id,element,start,end,steps,speed) {
  var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step;
  var target = document.getElementById(id);
  steps = steps || 20;
  speed = speed || 20;
  clearInterval(target.timer);
  endrgb = colorConv(end);
  er = endrgb[0];
  eg = endrgb[1];
  eb = endrgb[2];
  if(!target.r) {
    startrgb = colorConv(start);
    r = startrgb[0];
    g = startrgb[1];
    b = startrgb[2];
    target.r = r;
    target.g = g;
    target.b = b;
  }
  rint = Math.round(Math.abs(target.r-er)/steps);
  gint = Math.round(Math.abs(target.g-eg)/steps);
  bint = Math.round(Math.abs(target.b-eb)/steps);
  if(rint == 0) { rint = 1 }
  if(gint == 0) { gint = 1 }
  if(bint == 0) { bint = 1 }
  target.step = 1;
  target.timer = setInterval( function() { animateColor(id,element,steps,er,eg,eb,rint,gint,bint) }, speed);
}

// incrementally close the gap between the two colors //
function animateColor(id,element,steps,er,eg,eb,rint,gint,bint) {
  var target = document.getElementById(id);
  var color;
  if(target.step <= steps) {
    var r = target.r;
    var g = target.g;
    var b = target.b;
    if(r >= er) {
      r = r - rint;
    } else {
      r = parseInt(r) + parseInt(rint);
    }
    if(g >= eg) {
      g = g - gint;
    } else {
      g = parseInt(g) + parseInt(gint);
    }
    if(b >= eb) {
      b = b - bint;
    } else {
      b = parseInt(b) + parseInt(bint);
    }
    color = 'rgb(' + r + ',' + g + ',' + b + ')';
    if(element == 'background') {
      target.style.backgroundColor = color;
    } else if(element == 'border') {
      target.style.borderColor = color;
    } else {
      target.style.color = color;
    }
    target.r = r;
    target.g = g;
    target.b = b;
    target.step = target.step + 1;
  } else {
    clearInterval(target.timer);
    color = 'rgb(' + er + ',' + eg + ',' + eb + ')';
    if(element == 'background') {
      target.style.backgroundColor = color;
    } else if(element == 'border') {
      target.style.borderColor = color;
    } else {
      target.style.color = color;
    }
  }
}

// convert the color to rgb from hex //
function colorConv(color) {
  var rgb = [parseInt(color.substring(0,2),16), 
    parseInt(color.substring(2,4),16), 
    parseInt(color.substring(4,6),16)];
  return rgb;
}

Entonces, un millón de gracias si alguien puede decirme cómo agregar esos identificadores sobre la marcha o, tal vez, cómo cambiar JavaScript para clases de destino.

Muchas gracias,

Ene

Answer 1

Entonces tienes un ordinario <ul></ul> y quiero dar cada <li> ¿En él una identificación única?Prueba el comando jQuery "cada":

$("li").each(function(index, element){$(element).attr("id", index);});

Esto se repetirá sobre todos <li> elementos y asigne a cada elemento su índice numérico (en la matriz de elementos que jQuery ha encontrado) como atributo "id".

Answer 2

Si está usando jquery, puede obtener un elemento por clase usando una sintaxis como esta (suponiendo que la clase css se llama 'className':

$(".className").mouseover(function(){
  alert("something");
});

para hacer lo mismo con una identificación, haría esto en jquery:

$("#idVal").mouseover(function(){
  alert("something");
});