如何重構這個重複的jQuery代碼

我有一個約40個複選框和選擇（全部由web應用程序代碼動態構建）的頁面，我希望使用以下（工作）jQuery塊。我不想做的是必須爲每個複選框等重複此代碼。我不知道什麼是最好的方法來處理這個，因爲我不是一個JavaScript/jQuery專家。如何重構這個重複的jQuery代碼

有沒有人有以下代碼可以重構與任意數量的複選框和選擇一起使用的建議。目標是查詢數據庫並構建複選框列表並從中選擇。

編輯：此代碼需要火的個人複選框，其隱藏的選擇，而不是所有的複選框 - 抱歉，我沒有讓從原來的文章:)

$('#ssp_checkbox').change (function() { 
    $('#ssp_container').fadeIn(); 
}); 

$('#ssp_select').change(function() { 
    $('#ssp_addon').fadeIn().html('<i class="icon-ok"></i> ' + $('#ssp_select').val() + ' SSPs Ordered &nbsp;' + '<button type="button" id="ssp_remove" class="btn btn-mini btn-danger">Remove</button>'); 
    $('#ssp_container').fadeOut(); 
}) 

$(document).on('click', '#ssp_remove', function(){ 
    $('#ssp_select').val('0'); 
    $('#addons').find('#ssp_addon').fadeOut('slow'); 
    $('#ssp_checkbox').attr('checked', false); 
    countChecked(); 
})

說清楚

編輯：這是HTML的片段 - 有關於這40個，它們具有不同的ID，但在其他方面是相同的：

<!-- Civil Search/ServCode Prefix: civil/FIELDS: civil_checkbox, civil_select --> 
<div class="row-fluid"> 
    <div class="span12"> 
     <!-- civil --> 
     <label class="checkbox">Civil Search 
      <input type="checkbox" class="" name="civil_checkbox" id="civil_checkbox"> 
     </label> 
    </div><!--/Civil Search Span --> 
</div><!--/Civil Search Row --> 

<!-- Civil Search Select/FIELDS: civil_select --> 
<div class="row-fluid addon-select-container" id="civil_select-container"> 
    <div class="span12"> 
     <!-- civil_select --> 
     <label for="">Number of Services to Add:</label> 
     <select class="span2" name="civil_select" id="civil_select"> 
      <option value="0" selected>0</option> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      <option value="6">6</option> 
      <option value="7">7</option> 
      <option value="8">8</option> 
      <option value="9">9</option> 
      <option value="10">10</option> 
     </select> 
    </div><!--/Civil Search Addon Select Span --> 
</div><!--/Civil Search Addon Select Row -->

謝謝！

來源

2013-06-01 red4d

你能提供的標記（HTML）呢？你所談論的內容就足夠了，而不是全部。 – Femaref

然後在一個函數裏面做所有的事情。該函數將採用select和checkbox元素的id作爲參數。或者，也許所有的ID都遵循相同的方案，在這種情況下，您只需發送唯一的位「ssp」，也許呢？然後你可以用一個id數組（或包含所有必要的id作爲屬性的對象）在for循環中調用函數。 –

在一個非常通用的級別，你可以把一個類放在那些重複的項目上，然後使用jquery類選擇器（'.'而不是''''作爲ID）。 – ethorn10

我不知道你的代碼需要做什麼，但我「覺得」我有你要什麼的總體思路。

I threw something together in a fiddle（下面是代碼）。它所做的是將數據屬性添加到與複選框關聯的div的元素。然後觸發一個開關顯示/隱藏div標籤。這將通過無限數量的複選框運行。

<!-- here are the 40 checkboxes, truncated for brevity --> 
<label for="cb1">Check One</label> 
<input type="checkbox" name="cb1" id="cb1" data-associated-div="a"> 

<label for="cb2">Check Two</label> 
<input type="checkbox" name="cb2" id="cb2" data-associated-div="b"> 

<label for="cb3">Check Three</label> 
<input type="checkbox" name="cb3" id="cb3" data-associated-div="c"> 

<!-- pretend these are big, convoluted drop down's --> 
<div id="a" class="hidden">alpha</div> 
<div id="b" class="hidden">bravo</div> 
<div id="c" class="hidden">charlie</div>

$('body').ready(function(){ 
    // hide all hidden elements by default 
    $('.hidden').hide(); 
}); 

$('input:checkbox').change(function() { 
    // get the target div from the data attribute 'associatedDiv' 
    var targetDiv = '#' + $(this).data('associatedDiv'); 

    // if it's hidden, show it 
    if ($(targetDiv).is(":hidden")) { 
     $(targetDiv).fadeIn(); 

    // if it's visible, hide it 
    } else { 
     $(targetDiv).fadeOut(); 
    } 
});

來源

2013-06-01 05:59:10

所以我嘗試了這一點，它的工作原理。對於每個用戶可以選擇數量的複選框，我還有一個類似於上面的選擇 - 在更改時，這應該顯示另一個具有所選數量的div和一個「刪除」按鈕。有沒有辦法將相同的技術與此相結合？我嘗試了幾個實驗，但我似乎無法完成它的工作。您可以在上面原始帖子中的第二個和第三個jQuery函數中看到有問題的代碼。謝謝！ – red4d

你應該可以重複相同的原則。 –

而不是$('#ssp_checkbox') ......

如果你想所有的複選框，然後只需將它們全部選中

$('input:checkbox')

或給每個複選框的一類，例如'mycheckbox'和使用..

$('.mycheckbox')

相同的選擇。

$('select')

http://api.jquery.com/category/selectors/

來源

2013-06-01 01:22:29

如果我正確地理解了這個問題，他希望每個複選框都有一個*不同的* div淡入/淡出。即當civil_select複選框被標記時，只有civil_select div應該出現，而不是全部40多個奇數div。 – Martha

@Martha - 正確。 Chase上面的建議看起來像是我所需要的，我會嘗試併發布結果（並且如果它工作正確，請將答案標記爲正確）。 – red4d

如何重構這個重複的jQuery代碼

回答

相關問題