Question

我有以下代码用于根据是否单击一个复选框来更改div的css，所以我有多个具有多个复选框的div。我也将复选框设置保存到cookie，所以我有额外的代码来更新页面加载div。除了每次为每个ID重复相同的代码之外，还有更有效的方法吗？

以下是我的代码的两个部分的前两个块的示例。从第一个到最多100个实例重复两者，具体取决于页面上有多少个复选框。这不是一个庞大的文件，但在我看来，我可能还有更好的方法来做这个我不知道的事情。

$('#check_1').click(function () {
    if($('#check_1').is(':checked')) {
        $('#gs_wrap1').addClass('fade');
        $('#collect1').removeClass('notcollected');
        $('#collect1').addClass('collected');           
    } else {
        $('#gs_wrap1').removeClass('fade');
        $('#collect1').removeClass('collected');
        $('#collect1').addClass('notcollected');
    }
});
$('#check_2').click(function () {
    if($('#check_2').is(':checked')) {
        $('#gs_wrap2').addClass('fade');
        $('#collect2').removeClass('notcollected');
        $('#collect2').addClass('collected');           
    } else {
        $('#gs_wrap2').removeClass('fade');
        $('#collect2').removeClass('collected');
        $('#collect2').addClass('notcollected');
    }
});

if($('#check_1').is(':checked')) {
    $('#gs_wrap1').addClass('fade');
    $('#collect1').removeClass('notcollected');
    $('#collect1').addClass('collected');
} else {
    $('#gs_wrap1').removeClass('fade');
    $('#collect1').removeClass('collected');
    $('#collect1').addClass('notcollected');
}
if($('#check_2').is(':checked')) {
    $('#gs_wrap2').addClass('fade');
    $('#collect2').removeClass('notcollected');
    $('#collect2').addClass('collected');
} else {
    $('#gs_wrap2').removeClass('fade');
    $('#collect2').removeClass('collected');
    $('#collect2').addClass('notcollected');
}

HTML代码如下：

<input class="inputbox" type="checkbox" name="check_1" id="check_1">
<label for="check_1">
<div class="notcollected" id="collect1"></div>
<div class="gs_wrap" id="gs_wrap1">
<div class="gs_list_headimg"></div>
<div class="gs_list_description"></div></div></label>
<input class="inputbox" type="checkbox" name="check_2" id="check_2">
<label for="check_2">
<div class="notcollected" id="collect2"></div>
<div class="gs_wrap" id="gs_wrap2">
<div class="gs_list_headimg"></div>
<div class="gs_list_description"></div></div></label>

Answer 1

var $check1   = $('#check_1');
var $wrap1    = $('#gs_wrap1');
var $collect1 = $('#collect1');

var $check2   = $('#check_2');
var $wrap2    = $('#gs_wrap2');
var $collect2 = $('#collect2');

$check1.click(function () {
    handleChecked($check1, $wrap1, $collect1);
});

$check2.click(function () {
    handleChecked($check2, $wrap2, $collect2);
});

handleChecked($check1, $wrap1, $collect1);
handleChecked($check2, $wrap2, $collect2);


function handleChecked($check, $wrap, $collect) {
    if ($check.is(':checked')) {
        $wrap.addClass('fade');
        $collect.removeClass('notcollected').addClass('collected');
    } else {
        $wrap.removeClass('fade');
        $collect.removeClass('collected').addClass('notcollected');
    }
}

Answer 2

在代码可重用性方面，使用类（通常）来执行此类操作要好得多。这意味着没有与严格的ID紧密耦合。

假设您只有相关的复选框。

$('input[type="checkbox"]').on('click', function(event){
    var $this = $(this);
    if($this.is(':checked')){
        enableFade($this);
    } else {
        disableFade($this);
    }
});

function enableFade(el){
    el.closest('.gs_wrap').addClass('fade');
    el.closest('.collect').removeClass('notcollected').addClass('collected');
}

function disableFade(el){
    el.closest('.gs_wrap').removeClass('fade');
    el.closest('.collect').removeClass('collected').addClass('notcollected');
}

由于未提供HTML结构，我假设如下

<div>
    <div class="gs_wrap">
        <div>
            <input type="checkbox"/>
        </div>
        <div class="collect">
        </div>
    </div>
</div>
<div>
    <div class="gs_wrap">
        <div>
            <input type="checkbox"/>
        </div>
        <div class="collect">
        </div>
    </div>
</div>
<div>
    <div class="gs_wrap">
        <div>
            <input type="checkbox"/>
        </div>
        <div class="collect">
        </div>
    </div>
</div>
<!-- And so on -->

Answer 3

首先分析您的代码。首先，你正在做类似的事情：

$('#check_1').click
$('#check_2').click
...
//more check clicks.

您可以选择以check_开头的所有元素，并为这些元素添加点击处理程序。

$('[id^="check_"]').click(function(){

});

现在，你的处理程序的主体也非常相似。唯一改变的是最后的id号。它取决于单击元素末尾的id号，因此您可以执行以下操作：

$('[id^="check_"]').click(function(){
    var id = $(this).prop('id').match(/\d+$/)[0]; //selects numbers at the end.
    if($('#check_' + id).is(':checked')) {
        $('#gs_wrap' + id).addClass('fade');
        $('#collect' + id).removeClass('notcollected');
        $('#collect' + id).addClass('collected');           
    } else {
        $('#gs_wrap' + id).removeClass('fade');
        $('#collect' + id).removeClass('collected');
        $('#collect' + id).addClass('notcollected');
    }
});

最后，剩下的就是设置初始状态，它与我们的点击处理程序具有相同的主体。我们可以把它抽象成一个单独的函数：

function addRemoveFade(){
    var id = $(this).prop('id').match(/\d+$/)[0]; //selects numbers at the end.
    if($('#check_' + id).is(':checked')) {
        $('#gs_wrap' + id).addClass('fade');
        $('#collect' + id).removeClass('notcollected');
        $('#collect' + id).addClass('collected');           
    } else {
        $('#gs_wrap' + id).removeClass('fade');
        $('#collect' + id).removeClass('collected');
        $('#collect' + id).addClass('notcollected');
    }
}

但是我们只是丢失了获取id的上下文，我们需要传递jquery对象来获取id，但是因为我们只想获取id，所以我们只是传递它。

function addRemoveFade(id){
    if($('#check_' + id).is(':checked')) {
        $('#gs_wrap' + id).addClass('fade');
        $('#collect' + id).removeClass('notcollected');
        $('#collect' + id).addClass('collected');           
    } else {
        $('#gs_wrap' + id).removeClass('fade');
        $('#collect' + id).removeClass('collected');
        $('#collect' + id).addClass('notcollected');
    }
}

现在，我们可以做到：

function addRemoveFade(id){
    if($('#check_' + id).is(':checked')) {
        $('#gs_wrap' + id).addClass('fade');
        $('#collect' + id).removeClass('notcollected');
        $('#collect' + id).addClass('collected');           
    } else {
        $('#gs_wrap' + id).removeClass('fade');
        $('#collect' + id).removeClass('collected');
        $('#collect' + id).addClass('notcollected');
    }
}

$('[id^="check_"]').click(function(){
    var id = $(this).prop('id').match(/\d+$/)[0]; //selects numbers at the end.
    addRemoveFade(id);    
});

addRemoveFade(1);
addRemoveFade(2);

我们再次为我们拥有的每个check_元素重复此操作。我们不需要这样做。你可以这么做：

function addRemoveFade(id){
    if($('#check_' + id).is(':checked')) {
        $('#gs_wrap' + id).addClass('fade');
        $('#collect' + id).removeClass('notcollected');
        $('#collect' + id).addClass('collected');           
    } else {
        $('#gs_wrap' + id).removeClass('fade');
        $('#collect' + id).removeClass('collected');
        $('#collect' + id).addClass('notcollected');
    }
}

$('[id^="check_"]').each(function(){
    var id = $(this).prop('id').match(/\d+$/)[0];
    addRemoveFade(id);
    $(this).click(function(){
        addRemoveFade(id);
    });
});

在addRemoveFade函数中仍然存在一些重复的代码，它可能仍然最好有类而不是所有这些ID，但你现在明白了（我希望）。

如何减少jquery中的重复代码？

3 个答案: