不能在点击事件中使用变量？答案

【问题标题】：Can't use variable inside of click event?不能在点击事件中使用变量？
【发布时间】：2023-03-13 05:30:01
【问题描述】：

我有这段代码，它是 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、#cmets1 和#infoSpan1
然后，如果有人点击#toggleCommentForm1，slideToggle #writeComments1
为#writeComments2 和它的朋友们做这一切
为#writeComments3 和它的朋友做这一切

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

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

宽度：

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

这一切都有效，但自然只有#writeComments1 slideToggles，即使我点击#toggleCommentForm2。

我的问题是，为什么我不能在点击事件中使用变量“thisLooper”？

【问题讨论】：

$("#writeComments+thisLooper").slideToggle(); 应该是$("#writeComments"+thisLooper).slideToggle();？
^^ 您没有将其用作变量。但是你可以，如果你愿意的话...... ;)
循环中的闭包会修复它，以便在回调中保留索引值。
“thisLooper”变量应该与字符串连接（“#writeComments”+thisLooper）。然而，他在闭包方面还有另一个问题。
对不起，下面的大括号有一些错别字（现已更正）:)

标签： javascript jquery loops for-loop jquery-click-event

【解决方案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（因为代码有点奇怪）

【讨论】：

【解决方案2】：

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

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

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

【讨论】：