JQuery:增加5id的在飞行中(而不是类)
-
03-07-2019 - |
题
我处理这样的情况:
- 我有一个颜色动画脚本目标是通过id(它不JQuery但纯javascript)
- 然后,我有一个动态的列表中没有标识:'ul'somePHP投掷列项目'/ul'
- 最后我JQuery的本身(而我将用于添加几个id在飞行中的列项目:但我仍然不知道如何)
我意识到我不能添加,有文化的地方,单个类别清单的项目,作为色插件只搜索id(它使用getElementById,它们没有平行类)。
我必须排除这样的addClass Q功能,这将是很容易把在工作。
脚本只会的工作如果我能插入id在该列表中,5以及定义的标识,并得到以后的一些指令在外部化色彩的插件对影响他们:
<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>
然后,指示:
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.
我可以改变的插件的javascript本身,但是我以为它会更容易使用JQuery的增加、在某些方面,ids在我html。
彩色插件是一个很棒的一段代码写的 迈克尔Leigeber 我现如下:
// 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;
}
因此,一百万谢谢如果有人能告诉我如何将这些身份证,或者,也许,如何改变javascript为目标的班,
多谢了,
Jan
解决方案
所以你有一个普通的 <ul></ul>
并希望得到每 <li>
在这一独特的身份证吗?尝试s命令 "每个":
$("li").each(function(index, element){$(element).attr("id", index);});
这将循环的所有 <li>
元件和分配的每一个元素其nummerical索引(在元件阵列jQuery有找到)为"id"的属性。
其他提示
如果你使用jquery你可以得到一个元素类使用的语法样本(假设css类被称为'className':
$(".className").mouseover(function(){
alert("something");
});
做同样的事情id你会做这jquery:
$("#idVal").mouseover(function(){
alert("something");
});
不隶属于 StackOverflow