JQuery: ajout de 5 identifiants à la volée (au lieu de classes)

Question

Je traite de cette situation:

• J'ai un script d'animation couleur qui cible par identifiant (ce n'est pas JQuery mais du javascript pur)
• alors j'ai une liste dynamique sans identifiants: 'ul' certainsPHP lançant des éléments de liste '/ ul'
• et pour finir j'ai JQuery lui-même (que je vais utiliser pour ajouter plusieurs identifiants à la volée aux éléments de la liste: mais je ne sais toujours pas comment)

J'ai réalisé que je ne pouvais pas ajouter, avec JQuery, des classes uniques aux éléments de la liste, car le plug-in de couleur ne recherche que par ID (il utilise getElementById, qui n'a pas de parallèle avec les classes).

Je dois exclure donc la fonction addClass JQ, qui serait assez facile à utiliser.

Le script ne fonctionnerait que si je pouvais insérer des identifiants dans la liste, cinq identifiants bien définis, et donner ultérieurement des instructions dans le plug-in de couleur externalisé pour les affecter:

<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>

Ensuite, les instructions:

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.

Je pourrais changer le javascript du plugin lui-même, mais je pensais qu'il serait plus facile d'utiliser JQuery pour ajouter, d'une certaine manière, des identifiants dans mon code HTML.

Le plugin de couleur est un morceau de code génial écrit par Michael Leigeber Je reproduis comme suit:

// 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;
}

Donc, un million de fois si quelqu'un peut me dire comment ajouter ces identifiants à la volée, ou peut-être comment changer le javascript en classes cibles,

Merci beaucoup,

Jan

Answer 1

Vous avez donc un <ul></ul> ordinaire et vous souhaitez attribuer à chaque <li> un identifiant unique? Essayez la commande jQuery & "; Chaque &"; :

.

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

Ceci va parcourir tous les <=> éléments et attribuer à chaque élément son index numérique (dans le tableau d'éléments trouvé par jQuery) comme & "id &"; attribut.

Answer 2

Si vous utilisez jquery, vous pouvez obtenir un élément par classe en utilisant une syntaxe comme celle-ci (en supposant que la classe css s'appelle 'className':

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

pour faire la même chose avec un identifiant, vous le feriez dans jQuery:

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