2

RailsアプリでTwitterブートストラップを使用しており、複数のラジオボタン入力を使用してフォームを作成しています。フォームデータを管理するために、Javascriptを介して値が更新される非表示フィールドを作成しました。

任意の入力に対する以下のサンプルコード：

<div class="btn-group" data-toggle="buttons-radio">
          <button type="button" class="btn" id="ornamental_only_yes" name="ornamental_only" value="yes">Yes</button>
          <button type="button" class="btn" id="ornamental_only_no" name="ornamental_only" value="no">No</button>
        </div>
        <input type="hidden" id="ornamental_only" name="ornamental_only" value="">

このイベントを管理するためのJavascriptは次のとおりです。

<script>
  var btns = ['ornamental_only_yes', 'ornamental_only_no'];
  var input = document.getElementById('ornamental_only');
  for(var i = 0; i < btns.length; i++) {
    document.getElementById(btns[i]).addEventListener('click', function() {
      input.value = this.value;
    });
  }
</script>

私の質問：複数のラジオボタン入力に同時に適用するような方法でJavascriptコードを抽象化する方法はありますか？（たとえば、上記のコードブロックを異なるIDで3回繰り返した場合）

4

3 に答える 3

1

これが複数のボタンセットを持つHTMLであると仮定しましょう。

<div class="btn-group" id="btn_group_1" data-toggle="buttons-radio">
    <button type="button" class="btn" id="ornamental_only_yes" name="ornamental_only" value="yes">Yes</button>
    <button type="button" class="btn" id="ornamental_only_no" name="ornamental_only" value="no">No</button>
</div>
<input type="hidden" id="hidden_1" name="ornamental_only" value="">
<div class="btn-group" id="btn_group_2" data-toggle="buttons-radio">
    <button type="button" class="btn" id="awesome_only_yes" name="awesome_only" value="yes">Yes</button>
    <button type="button" class="btn" id="awesome_only_no" name="awesome_only" value="no">No</button>
</div>
<input type="hidden" id="hidden_2" name="awesome_only" value="">

すべてのボタングループのクリックを動的にリッスンするには、次のようにします（テストされていないjQuery）。

$('.btn-group .btn').on('click', function() {
    var parentID = $(this).parent().attr('id');
    $('#hidden_' + parentID.substr(parentID.length - 1)).val($(this).val());
});

inputこれは、の末尾の番号に基づいて非表示フィールドをターゲットにするだけidです。

于 2012-10-13T05:27:18.187 に答える
0

これを使用してみてください：

for(var i = 0; i <= btns.length; i++) {
于 2012-10-12T19:33:10.910 に答える
0

jQueryを使用します。

var buttonObjs = $(".btn-group").find("button");
buttonObjs.click(function(){
  $("#ornamental_only").val(this.value);  
});

このコードを複数のブロックに適用するには、次のような特定のクラスをbtn-group要素に割り当てるだけです。

<div class="btn-group js_radio_toggle">

jsコードでは、次を使用します。

var buttonObjs = $(".btn-group.js_radio_toggle").find("button");

これで、このコードはどこでも再利用できます。

jsコードにもあります。あなたはこれを行うことができます、

document.getElementsByClassName("js_radio_toggle").

ただし、jQueryを使用することをお勧めします。

于 2012-10-13T04:49:27.710 に答える