0

私はJavaScriptが初めてで、質問があります。Twitterのブートストラップ、レール、シンプルフォームを使用しています。フォームで JavaScript を使用して、チェックボックスをトグルに置き換えました。編集時に同じフォームを使用して、正しいトグル オプションをユーザーに表示しようとしています。

edit アクションでフォームが表示されると、チェックボックスの値 (1 または 0) のトグルが選択されます。以下の JS コードは、1 つのトグル要素に対して機能します。同じ 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 に答える