Question

我正在尝试将for循环实现到我的Javascript / jQuery代码中，因为我在实现for循环之前进行了测试，所以知道有效。我发现了这个网站的for循环语法：http://www.w3schools.com/js/js_loop_for.asp我不知道如何在.css jQuery方法中将我的变量“i”实现到我的for循环中。我究竟做错了什么？这是我的代码：

for(var i=0;i<36;i++) {
    $(".quote_" + i).mouseenter(function(){
        $("td.quote_" + i).css("background-color", "rgb(238, 238, 238)");
    });
    $(".quote_" + i).mouseleave(function(){
        $("td.quote_" + i).css("background-color", "white");
    });
}

这是我知道的代码：

$(".quote_1").mouseenter(function(){
        $("td.quote1").css("background-color", "rgb(238, 238, 238)");
    });
    $(".quote_1").mouseleave(function(){
        $("td.quote_1").css("background-color", "white");
    });

Answer 1

这都错了。

使用一个 CSS类而不是编号。然后使用CSS。无需JavaScript。

.quote {
    background-color: white;
}
.quote:hover {
    background-color: rgb(238, 238, 238);
}

Answer 2

这是使用closure variable in a loop

的典型问题

for(var i=0;i<36;i++) {
    $(".quote_" + i).mouseenter(function(){
        $(this).css("background-color", "rgb(238, 238, 238)");
    }).mouseleave(function(){
        $(this).css("background-color", "white");
    });
}

我建议不要像这样创建一个循环，而是建议在每个元素中添加一个名为quote的类或类似的东西，以便元素类属性看起来像class="quote quote_1"然后

    $(".quote").mouseenter(function(){
        $(this).css("background-color", "rgb(238, 238, 238)");
    }).mouseleave(function(){
        $(this).css("background-color", "white");
    });

Answer 3

我看到这个问题出现了很多。它与i的值如何约束有关，或者更具体地说它是如何约束的。

Google for“js closures loop”，你会找到解决此问题的答案。

http://www.mennovanslooten.nl/blog/post/62

JavaScript closure inside loops – simple practical example

将Javascript变量实现为jQuery方法

3 个答案: