如何使这些重复的代码更有效:jquery

How to make this repeating code more efficient: jquery

本文关键字：有效 jquery 代码 何使这      更新时间：2023-09-26
    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()这样的东西吗?有人能告诉我如何精简这段代码吗?

谢谢

您可以简单地这样做:

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

或者你可以创建一个新的类，比如checkbox来应用到你所有的复选框，然后使用这个:

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

最好的方法是为所有元素添加一个额外的类复选框，然后使用

<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')
});
相关文章：