Question

我是一个试图抓住JavaScript和jQuery的webdesigner，我想学习如何编写更简洁，更简洁的代码 - 以避免被工作中的开发人员嘲笑;）

我有这个片段：

// 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

很难说没有看到HTML结构，但可能会转到父级，那么后代会发现多个div？

在您的示例中，您可以替换：

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

代码与原始示例更相似：

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

然而，抛弃所有数字并使用.product-optional-checkbox类更好。这样，您可以一次性将click函数添加到该类的所有元素，并避免循环：

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

Answer 2

鉴于您的点击事件似乎与复选框相关联（基于您的示例中的类名），为什么不实际提供代码来处理这些复选框的点击事件？例如：

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

尽管ID选择器在这里是更好的选择，并且根据它们在您的页面中的位置，您甚至可以逃脱以下内容：

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

如果您可以发布一些HTML，那么也可能有助于提供更准确的答案。

在IE7中使用for-loop时切换效果问题

2 个答案: