0

我对javascript很陌生并且有一个问题。我正在使用 twitter bootstrap、rails 和 simpleform。我在表单中使用 javascript 将复选框替换为切换。我现在尝试在编辑时使用相同的表单向用户显示正确的切换选项。

当表单显示在编辑操作中时，为复选框值（1 或 0）选择切换。下面的 JS 代码适用于单个切换元素。我想知道如果我给它们相同的ID，是否可以循环遍历所有切换？我的表单中有超过 10 个复选框，不想复制 JS。

var n = $('#hole_punch_buttons input[value=1]').length;
if(n === 1){
    $("#hole_punch_buttons a[data-value=1]").addClass('active')
}
else {
    $("#hole_punch_buttons a[data-value=0]").addClass('active')
}

这是HTML：

<div id="hole_punch_buttons" class="btn-group" data-toggle="buttons-radio">
  <div class="control-group hidden">
           <div class="controls">
               <input class="hidden" id="id_card_design_hole_punch" name="id_card_design[hole_punch]" type="hidden" value="1">
           </div>
       </div>
  <a class="btn ffbtn active" data-value="1">Yes</a>
  <a class="btn sfbtn" data-value="0">No</a>
</div>

也许有更好的方法来写它......

4

1 回答 1

1

我想知道如果我给它们相同的ID，是否可以循环遍历所有切换？

不，ID 是唯一的。但是，如果您使用类，则可以遍历它们。

hole_punch_buttons这是一个用作类的示例：

<div class="btn-group hole_punch_buttons" data-toggle="buttons-radio">

还有你重写的 JS：

$('div.hole_punch_buttons').each(function() {
    var n = $(this).find('input[value=1]').length;
    $(this).find('a[data-value=' + n + ']').addClass('active');
});

小提琴

另一种解决方案是使用.val()检索隐藏输入的值并将活动类添加到相应锚点的数据值中：

$('div.hole_punch_buttons').each(function() {
    var n = $(this).find('input.hidden').val();
    $(this).find('a[data-value=' + n + ']').addClass('active');
});

小提琴

于 2012-10-28T22:09:00.677 回答