Question

我有这段代码及它的javaScript和jQuery：

for (thisLooper = 1; thisLooper < 4; thisLooper++) {

    if ($("#writeComments"+thisLooper).length > 0) {
        $("#writeComments"+thisLooper+",#comments"+thisLooper+", #infoSpan"+thisLooper+"").hide();
        $("#toggleCommentForm"+thisLooper).click(function () {
            $("#writeComments+thisLooper").slideToggle();
        });
    }

}

它的作用：

检查＃writeComments1是否存在
如果存在，请隐藏＃writeComments1，＃comments1和#infoSpan1
然后，如果有人点击#toggleCommentForm1，则滑动切换#writeComments1
为＃writeComments2及其朋友
为＃writeComments3及其朋友

上面的代码没有任何反应，但如果我替换：

$("#toggleCommentForm"+thisLooper).click(function () {
    $("#writeComments+thisLooper").slideToggle();
});

宽度：

$("#toggleCommentForm"+thisLooper).click(function () {
    $("#writeComments1").slideToggle();
});

这一切都有效，但自然只有＃writeComments1 slideToggles，即使我点击＃toggleCommentForm2也是如此。

我的问题是，为什么我不能使用变量＆＃34; thisLooper＆＃34;在点击事件中？

Answer 1

循环中的闭包将修复当前问题（当然将变量放在字符串之外），以便索引值保留在click回调函数中。

for (index = 1; index < 4; index++) {
    (function(thisLooper){
        if ($("#writeComments"+thisLooper).length > 0) {
            $("#writeComments"+thisLooper+",#comments"+thisLooper+", #infoSpan"+thisLooper+"").hide();
            $("#toggleCommentForm"+thisLooper).click(function () {
                $("#writeComments"+thisLooper).slideToggle();
            });
        }
    })(index);

}

您还应该创建本地var而不是继续重新查询选择，但我需要先查看完整的HTML（因为代码有点奇怪）

Answer 2

问题是你的循环变量没有正确关闭;而不是使用闭包来解决这个问题（这是TrueBlueAussie在他的回答中解释的），你也可以考虑将点击处理程序绑定到你想要执行幻灯片的元素：

$("#toggleCommentForm"+thisLooper).click($.proxy(function () {
     // this is a jQuery object
     this.slideToggle();
}, $("#writeComments"+thisLooper));

请注意，通过闭包可以更好地解决比单个jQuery对象操作更复杂的事情。

无法在点击事件中使用变量？

2 个答案: