点击事件无触发

Question

This is a simple but intersting issue. Suppose I have two sections of respective class .toggle0 and .toggle1 , suppose I want to display .toggle0 and hide .toggle1 when clicking on some tag .footer0 , and vice-versa : I want to display .toggle1 and hide .toggle0 when clicking on some tag .footer1 . Now this code works correctly

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

but this doesn't work in the sense that nothing happens on click event

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

if I put this

      $('.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 displays and .toggle0 hides when clicking on some tag .footer1 but .toggle0 does not display and .toggle1 does not hide when clicking on some tag .footer0 . It seems that the second click event takes precedence upon the first

Answer 1

The i within the the click handler isn't evaluated until a click, at which point the value has changed from when the handler was bound. If you want to go this route, you need to create a closure. Here's one method to do so:

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