如何使此重复代码更有效：jquery

Question

    jQuery('.checkbox1').click(function(){
        jQuery(this).parent().toggleClass('active')
    });
    jQuery('.checkbox2').click(function(){
        jQuery(this).parent().toggleClass('active')
    });
    jQuery('.checkbox3').click(function(){
        jQuery(this).parent().toggleClass('active')
    });
    jQuery('.checkbox4').click(function(){
        jQuery(this).parent().toggleClass('active')
    });

我对所有四个都运行相同的功能。 我可以使用.each()类的东西吗？ 有人可以告诉我如何压缩此代码吗？

谢谢

Answer 1

您可以简单地做到这一点：

jQuery('.checkbox1, .checkbox2, .checkbox3, .checkbox4').click(function(){
    jQuery(this).parent().toggleClass('active')
});

或者您可以创建一个新类，说出checkbox以应用到所有复选框，然后使用以下方法：

jQuery('.checkbox').click(function(){
    jQuery(this).parent().toggleClass('active')
});

Answer 2

最好的方法是在所有元素中添加一个附加的类复选框，然后使用

<input type="checkbox" class="checkbox checkbox1" />
<input type="checkbox" class="checkbox checkbox2" />
<input type="checkbox" class="checkbox checkbox3" />
<input type="checkbox" class="checkbox checkbox4" />

然后

jQuery('.checkbox').click(function(){
    jQuery(this).parent().toggleClass('active')
});

如果您不能这样做，则使用多个选择器

jQuery('.checkbox1, .checkbox2, .checkbox2, .checkbox4').click(function(){
    jQuery(this).parent().toggleClass('active')
});