2013-08-23 15 views
0

Это простая, но интересная проблема. Предположим, что у меня есть два раздела соответствующего класса .toggle0 и .toggle1, предположим, что я хочу, чтобы отобразить .toggle0 и скрыть .toggle1 при нажатии на какой-то тег .footer0, и наоборот: я хочу, чтобы отобразить .toggle1 и скрыть .toggle0 при нажатии на какой-то тег .footer1. Теперь этот код работает правильнонет срабатывания при событии click

$('.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 не скрывает wh en нажав на какой-либо тег .footer0. Похоже, что второе событие щелчка имеет преимущество при первом

+2

log 'i' внутри вашего события click. Это не то, что вы думаете. Почему вы используете перечисленные классы? Там должен быть лучший путь. –

+1

Рассматривали ли вы использование относительных селекторов next(), previous(), parent(), find() и полностью уничтожить имена классов? –

ответ

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

Отлично, спасибо! – user1611830

+0

На самом деле консоль регистрирует правильные значения, но метод show() и hide() не работает! – user1611830

+0

Копирует код с вашего вопроса с помощью 'i' вместо' idx'. –

0
$('.footer0').click(function(){ 
    $('.toggle0 .toggle1').hide(); 
    $('.toggle0').show(); 
}); 
$('.footer1').click(function(){ 
    $('.toggle0 .toggle1').hide(); 
    $('.toggle1').show(); 
}); 
Смежные вопросы