这似乎是一个简单的问题,我希望你能帮助我。 我想补充一点,我的代码就像我描述的那样工作。我不满足于我在for-loop之外增加[i]的问题解决了我的问题。
我想要的是在图像悬停在图像上时显示侧边栏菜单。
我的CSS看起来像:
GM_addStyle
(
'.colormenu { \
display:none; \
margin-left: 10px; \
margin-top: -55px; \
} \
.colormenu a { \
display: block; \
width: 30px; \
} \
.colorlist { \
list-style-type: none; \
} \
'
);
现在我正在定义两个变量。一个包含一些颜色,另一个包含一些水果。
var color = ['red','yellow','green','blue'];
var fruit = ['strawberry','banana','apple','blueberry'];
然后我定义了两个数组:
var hoverstring = new Array(color.length);
var idstring = new Array(color.length);
现在我想看看var颜色元素的值是否与webiste上的图像标题相匹配。 对于每个小于var颜色长度的元素,我在列表中创建两个由div包装的链接,并在href包装img-element之后插入它。
for (var i=0;i<color.length;i++) {
$("<div id='colormenu"+i+"' class='colormenu'><ul class='colorlist'><li><a href='path"+color[i]+"'>Call</a></li><li><a href='path"+color[i]+"'>Chat</a></li></ul><div>").insertAfter("a[href$='"+fruit[i]+"']");
hoverstring[i]="img[title$='"+fruit[i]+"']:first";
idstring[i]="#colormenu"+i;
}
我采取的最后一步,我遇到的问题是为每个元素创建一个函数。这只是它的样子的一个例子:
$(hoverstring[0]).hover(function(){
$(idstring[0]).toggle();
});
$(hoverstring[1]).hover(function(){
$(idstring[1]).toggle();
});
$(hoverstring[2]).hover(function(){
$(idstring[2]).toggle();
});
$(hoverstring[3]).hover(function(){
$(idstring[3]).toggle();
});
$(hoverstring[4]).hover(function(){
$(idstring[4]).toggle();
});
$(hoverstring[5]).hover(function(){
$(idstring[5]).toggle();
});
这种方法有效,但我说的不是很方便。
,而不是创建大量的函数,我想增加i,而不是手动完成。像:
for (var i=0;i<color.length;i++) {
$("<div id='colormenu"+i+"' class='colormenu'><ul class='colorlist'><li><a href='path"+color[i]+"'>Call</a></li><li><a href='path"+color[i]+"'>Chat</a></li></ul><div>").insertAfter("a[href$='"+fruit[i]+"']");
hoverstring[i]="img[title$='"+fruit[i]+"']:first";
idstring[i]="#colormenu"+i;
$(hoverstring[i]).hover(function(){
$(idstring[i]).toggle();
});
}
我试了几次,但由于某种原因,我没有在for循环中增加。你知道为什么吗?
我真的希望你能帮助我。提前谢谢。
答案 0 :(得分:4)
你可以像这样快速做点什么:
$.each(color, function(i) {
$("<div id='colormenu"+i+"' class='colormenu'><ul class='colorlist'><li><a href='path"+this+"'>Call</a></li><li><a href='path"+this+"'>Chat</a></li></ul><div>").insertAfter("a[href$='"+fruit[i]+"']");
$("img[title$='"+fruit[i]+"']:first").hover(function(){
$("#colormenu"+i).toggle();
});
});
这里的不同之处在于i
的范围是这个回调,而不是引用每次都用循环更改的相同变量。
答案 1 :(得分:2)
你正面临ECMA-/ Javascript
程序员可能犯的最大错误之一:
忘记closures
和hoisting of variables
。
将其放入for-loop
:
$(hoverstring[i]).hover(function(){
$(idstring[i]).toggle();
});
会导致i
被所有方法关闭。您需要调用另一个函数来解决该问题:
for (var i=0;i<color.length;i++) {
$("<div id='colormenu"+i+"' class='colormenu'><ul class='colorlist'><li><a href='path"+color[i]+"'>Call</a></li><li><a href='path"+color[i]+"'>Chat</a></li></ul><div>").insertAfter("a[href$='"+fruit[i]+"']");
hoverstring[i]="img[title$='"+fruit[i]+"']:first";
idstring[i]="#colormenu"+i;
(function(index){
$(hoverstring[index]).hover(function(){
$(idstring[index]).toggle();
});
}(i));
}
答案 2 :(得分:2)
正好递增i
,但悬停函数中的i
是循环中i
的引用。循环完成后,hover函数内的i
在所有悬停函数内,是循环后i
的值。这被称为闭包。
如果要在创建函数的特定时间点冻结i
的值,则需要执行以下操作:
$(hoverstring[i]).hover((function (x) {
return function () {
$(idstring[x]).toggle();
}
})(i));