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

我在所有4个上运行相同的功能。我可以使用像.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')
});

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

2 个答案: