如何重构这个重复的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代码

回答

相关问题