Проблема эффекта переключения при использовании цикла for в IE7

Question

Я веб-дизайнер, который пытается освоить JavaScript и jQuery, и я хочу научиться писать более короткий и лаконичный код, чтобы избежать насмешек со стороны разработчиков на работе;)

У меня есть этот фрагмент:

// toggle divs when checkbox is checked
$('.product-optional-checkbox1').click(function () {
    $('.product-optional-toggle1').toggle('fast');  
});

$('.product-optional-checkbox2').click(function () {
    $('.product-optional-toggle2').toggle('fast');  
});

$('.product-optional-checkbox3').click(function () {
    $('.product-optional-toggle3').toggle('fast');  
});

// hide divs
$('.product-optional-toggle1').hide(); 
$('.product-optional-toggle2').hide(); 
$('.product-optional-toggle3').hide();

... что я хочу уменьшить, используя цикл for, например:

for( var i = 1; i < 4; ++i ) {
    $('.product-optional-checkbox' + i).click(function () {
        $(this).parent('div').find('div').toggle('fast');  
    });
    $('.product-optional-toggle' + i).css({ display: 'none'}); 
};

В FF работает нормально, однако в IE7 переключается дважды. Кто-нибудь знает, кто может решить такую ​​проблему?

Answer 1

Учитывая, что ваши события кликов, кажется, привязаны к флажкам (на основе имен классов, которые есть в вашем примере), почему бы на самом деле не предоставить код для обработки событий щелчков для этих флажков? Например:

<div id='my_group_of_checkboxes'>
  <input type="checkbox" id="checkbox1">
  <input type="checkbox" id="checkbox2">
  ...
</div>

И ваш код jQuery затем сокращается до трех строк:

$('#my_group_of_checkboxes :checkbox').click(function(){
  $(this).parent('div').hide('fast');
});

Похоже, вам также необходимо скрыть элементы <div>, связанные с каждым флажком:

$('div[class^="product-optional"]').hide();

Несмотря на то, что селекторы идентификаторов были бы лучшим вариантом здесь, и, в зависимости от их положения на вашей странице, вы можете даже получить что-то вроде:

$('#my_container_div_id div').hide();

Если вы можете опубликовать часть своего HTML-кода, это также может помочь предоставить более точные ответы.

Answer 2

Трудно сказать, не видя структуру HTML, но, возможно, переходя к родителю, потомки находят несколько элементов div?

В вашем примере вы можете заменить:

$(this).parent('div').find('div').toggle('fast');

С кодом, более похожим на исходные примеры:

$('.product-optional-toggle' + i).toggle('fast');

Однако было бы гораздо лучше отбросить все числа и просто использовать класс .product-optional-checkbox. Таким образом, вы можете добавить функцию щелчка ко всем элементам этого класса за один раз и избежать цикла:

$('.product-optional-checkbox').click(function () {
    // do stuff using $(this)
});