如何重构此重复的jQuery代码

Question

我有一个约40个复选框的网页，并选择(所有动态构建的web应用程序代码)，我想使用以下(工作)的jQuery。我不想做的是为每个复选框重复这段代码，等等。我不知道解决这个问题的最佳方法是什么，因为我不是JavaScript/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 -->

谢谢!

Answer 1

我不知道您的代码需要做什么，但我“认为”我对您的目标有一个大致的概念。

我把一些东西放在小提琴里 (下面是代码)。它所做的是向input:checkbox元素添加一个数据属性，其中包含与复选框相关联的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();
    }
});

Answer 2

而不是$('#ssp_checkbox')。

如果您想要所有复选框，那么只需选择它们全部。

$('input:checkbox')

或者给每个复选框一个类，例如“my复选框”并使用它。

$('.mycheckbox')

选秀组也是一样。

$('select')

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