在javascript循环中执行函数时出现问题

Trouble executing functions in javascript loops

本文关键字：问题 函数 执行 javascript 循环      更新时间：2023-09-26

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

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

理想情况下，当点击"图标-1"时，它会打开"窗口-1"等。但它不起作用。

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

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

非常感谢！

当你说"打开一个窗口"时，你的意思是打开一个弹出窗口还是只显示一个现有的元素
假设是后者，我会给每个图标一个它们都共享的类，并将单击处理程序附加到具有该类的元素，而不是使用三个不同的单击处理程序。然后使用数据属性存储相应的窗口编号：

<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();
});

尝试类来实现这一点。

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

我不会为此使用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 */
    }
}
相关文章：