JQuery: Zugabe von 5 ids on the fly (anstelle von Klassen)

Question

ich mit dieser Situation zu tun habe:

• ich eine Farbanimation Skript, das von id Zielen (es ist nicht JQuery aber reine Javascript)
• dann habe ich eine dynamische Liste ohne IDs: 'ul' somePHP werfen Liste Artikel '/ ul'
• und schließlich habe ich JQuery selbst (die ich verwenden werde, um mehrere IDs im laufenden zu den Listenelementen hinzuzufügen: aber ich weiß immer noch nicht wie)

I'v Es wurde klar, dass ich mit JQuery keine einzelnen Klassen zu den Listenelementen hinzufügen konnte, da das Farb-Plugin nur nach ID sucht (es verwendet getElementById, die keine Parallelen zu Klassen haben).

Ich muss also die addClass JQ-Funktion ausschließen, die einfach genug wäre, um bei der Arbeit zu setzen.

Das Skript nur funktionieren würde, wenn ich ids in der Liste 5 gut definierten IDs einfügen könnte, und geben später einige Anweisungen in der externalisiert Farbe Plugin, sie beeinflussen:

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

Dann die Anweisungen:

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. 

ich konnte die JavaScript-Plugin selbst ändern, aber ich dachte, es wäre einfacher, JQuery mit in gewisser Weise ids in meinem html hinzufügen.

Die Farbe Plugin ist ein fantastisches Stück Code von Michael Leigeber geschrieben ich reproduzieren wie folgt:

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

, wenn jemand eine Million Dank So kann mir sagen, wie diese ids on the fly hinzuzufügen, oder, vielleicht, wie das Javascript ändern Klassen zielen,

Vielen dank,

Jan

Answer 1

So haben Sie einen gewöhnlichen <ul></ul> und jeder <li> darin eine eindeutige ID geben wollen? Versuchen Sie, die jQuery Befehl "each":

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

Dies wird Schleife über alle <li> Elemente und Zuweisen jedes Element seinen nummerical Index (in der Anordnung von Elementen wurde gefunden jQuery) als Attribut „id“.

Answer 2

Wenn Sie jquery verwenden können Sie ein Element von Klasse mit Syntax wie folgt (vorausgesetzt, die CSS-Klasse erhalten wird ‚classname‘ genannt:

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

die gleiche Sache mit einem id tun Sie dies in jquery tun würde :

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