堆棧內存溢出
  簡體   English   中英

如何減少jQuery中的重復代碼？

[英]How to reduce repeating code in jquery?

 原文  2016-02-11 15:15:10  2   3    javascript/ jquery/ checkbox

問題描述

我有以下代碼，用於根據是否單擊復選框來更改div的css，因此我有多個帶有多個復選框的div。 我還將復選框設置保存到cookie中，因此我還有其他代碼來更新pageload上的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>

3 個解決方案

解決方案1
 0  2016-02-11 15:20:44

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

解決方案2
 0  2016-02-11 15:32:15

就代碼可重用性而言，使用類（通常）來做這些事情要好得多。 這意味着不與嚴格的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 -->

解決方案3
 0 已采納  2016-02-11 16:03:09

首先分析您的代碼。 首先，您正在執行以下操作： 

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

您可以只選擇所有以check_開頭的元素，然后向其中添加點擊處理程序。 

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

});

現在，您的處理程序的主體也非常相似。 唯一更改的是結尾的ID號。 它取決於clicked元素末尾的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，但是現在您知道了（我希望）。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何重構此重復的jQuery代碼 如何使此重復代碼更有效：jquery jQuery如何通過重復代碼提高效率 jQuery代碼重復問題 在jQuery中重復代碼 如何在 jQuery 和 CSS 中減少我的代碼 如何減少 jQuery 中復選框列表的代碼大小？ 如何減少我重復的jQuery代碼 如何減少Jquery / Ajax代碼-&gt;刪除重復項 如何減少jQuery代碼中的行數
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM