Question

这是一个简单但有趣的问题。假设我有两个相应类.toggle0和.toggle1的部分，假设我想在点击某个标记.toggle0时显示.toggle1并隐藏.footer0，并且副-versa：点击某个标记.toggle1时，我想显示.toggle0并隐藏.footer1。现在这段代码正常工作

$('.toggle1').hide();
  var i=0;
    $(".footer"+i+"").click(function(){
        $(".toggle"+(i+1) %2+"").hide();
        $(".toggle"+i+"").show();
    });
  var j=1;
    $(".footer"+j+"").click(function(){
        $(".toggle"+(j+1) %2+"").hide();
        $(".toggle"+j+"").show();
    });

但是这在单击事件

上没有任何反应的意义上不起作用

for(var i=0;i<2;i++){
    $(".footer"+i+"").click(function(){
            $(".toggle"+(i+1) %2+"").hide();
            $(".toggle"+i+"").show();
        });
}

如果我把这个

      $('.toggle1').hide();
      var i=0;
        $(".footer"+i+"").click(function(){
            $(".toggle"+(i+1) %2+"").hide();
            $(".toggle"+i+"").show();
        });
       i =1;
        $(".footer"+i+"").click(function(){
            $(".toggle"+(i+1) %2+"").hide();
            $(".toggle"+i+"").show();
        });

单击某个标记.toggle1时，

.toggle0会显示并.footer1隐藏，但.toggle0未显示，.toggle1在点击某个标记时无法隐藏{ {1}}。似乎第二次点击事件优先于第一次

Answer 1

点击处理程序中的i在点击之前不会被评估，此时值已从绑定处理程序时发生更改。如果你想走这条路，你需要创建一个闭包。这是一种方法：

for (var i = 0; i < 2; i++) {
    $(".footer" + i + "").click(function () {
        var idx = i;
        return function () {
            $(".toggle"+(idx+1) %2+"").hide();
            $(".toggle"+idx+"").show();
            console.log(idx);
        }
    }());
}

Answer 2

$('.footer0').click(function(){
  $('.toggle0 .toggle1').hide();
  $('.toggle0').show();
});
$('.footer1').click(function(){
  $('.toggle0 .toggle1').hide();
  $('.toggle1').show();
});

没有触发点击事件

2 个答案: