在javascript循环中执行函数时出错

Question

我要做的是将相同的函数设置为不同的元素，例如“图标-1”、“图标-2”、“图标-3”。该函数打开一个与这些ids相对应的窗口-- " window -1“、"window-2”、"window-3“。我试图使用这个代码块：

for (var i=1; i<=3; i++) {
  $("#icon"+i.toString()).click(function(){
      $("#window"+i.toString()).show();
   )};
)};

理想情况下，当单击“图标-1”时，它会打开"window-1“等，但它不起作用。

我检查了console.log( i )，每次发生单击事件时，它都会打印出I的最终计数，即4。

有什么办法可以解决这个问题吗？

非常感谢!

Answer 1

当您说“打开一个窗口”时，您的意思是打开一个弹出窗口还是只显示一个现有的元素？

假设是后者，我将为您的每个图标提供一个它们都共享的类，并将单击处理程序附加到该类的元素中，而不是使用三个不同的单击处理程序。然后使用data属性存储相应的窗口号：

<div class="icon" data-window="1">This is an icon</div>
<div class="icon" data-window="2">This is an icon</div>

$('.icon').click(function(){
    var windowNum = $(this).data();
    $('#window-' + windowNum).show();
});

Answer 2

尝试课程来实现这一点。

$('.yourIconClass').each(function() {
    $(this).click(function(){
        $('.yourWindowClass').eq($(this).index).show();
    });
});

Answer 3

我不会用for循环来处理这个问题。我不使用查询，所以我将使用javascript。

我会将按钮/图标分配给javascript中的变量，然后为每个按钮设置一个事件侦听器。该事件侦听器将向函数发送一个值，该函数将决定打开哪个窗口：

var button1 = document.getElementById("button_1_id");
var button2 = document.getElementById("button_2_id");
var button2 = document.getElementById("button_2_id");

button1.addEventListener('click',function(){
    triggerWindow(1);
});
button2.addEventListener('click',function(){
    triggerWindow(2);
});
button3.addEventListener('click',function(){
    triggerWindow(3);
});

function triggerWindow(input) {
    if(input === 1){
     /* code to trigger window one */
    }
    else if(input === 2){
     /* code to trigger window two */
    }
    else if(input === 3){
     /* code to trigger window three */
    }
}