1

選択した 2 つのボタンの値を取得し、それらを追加してから、回答を出力しようとする少しの助けを探しています...

ここで js フィドルをまとめましたが、jQuery は私の得意分野ではなかったので、実際には「伝統的な」ラジオ ボタンではないブートストラップのラジオ ボタンを理解するのに苦労しています...

<div class="control-group">
<h4>How much you wanna give me today?</h4>
    <div class="controls">
         <div class="btn-group" id="pay-me-friend" data-toggle="buttons-radio">
              <button type="button" name="dollar" class="btn" value="100">$100</button>
              <button type="button" name="dollar" class="btn" value="200">$200</button>
              <button type="button" name="dollar" class="btn" value="300">$300</button>
              <button type="button" name="dollar" class="btn" value="400">$400</button>
         </div>
    </div>
</div>
<div class="control-group">
    <h4>How much you wanna multiply that by?</h4>
        <div class="controls">
           <div class="btn-group" id="pay-me-multiply" data-toggle="buttons-radio">
              <button type="button" name="multiple" class="btn" value="1">1</button>
              <button type="button" name="multiple" class="btn" value="2">2</button>
              <button type="button" name="multiple" class="btn" value="3">3</button>
              <button type="button" name="multiple" class="btn" value="4">4</button>
           </div>
        </div>
</div>
<hr>
<div class="well">Total amount you'll pay me: <span id="displaynumber"></span></div>

そして、これがjavascriptを使用した私の出発点です...答えがその場で変更できるように、キーアップ機能を使用したいことも追加する必要があります..

$('#pay-me-friend > button.active').keyup(function(){    
    var no1 = $('#pay-me-friend > button.active').val(); 
    var no2 = $('#pay-me-multiply > button.active').val();    
    $('#displaynumber').html(no1 + no2);
});
4

1 に答える 1

1

現在、Bootstrap API 内で利用できるイベントはありませんが、使用するクリック ハンドラーを単純にオーバーライドすることで簡単に利用できます。

Bootsrap の問題のこのスレッドは、この機能の追加に消極的であることを示しています。

https://github.com/twitter/bootstrap/issues/2380

以下は、現在のクリック ハンドラーを置き換え、その中でトリガーされるカスタム イベントで新しいハンドラーを追加します。ブートストラップがロードされた後、それを使用するコードの前にいつでもこれを追加してください:

$(document).off('click.button.data-api').on('click.button.data-api', '[data-toggle^=button]', function(e) {
    var $btn = $(e.target);
    if (!$btn.hasClass('btn')) {
        $btn = $btn.closest('.btn')
    };
    $btn.button('toggle');
    /* this is only change to code in bootstrap.js*/
    $btn.trigger('button_click');
});

コード内で、ハンドラーをカスタム イベントにバインドできますbutton_click。

$('#pay-me-friend > button').on('button_click', function() {
    /* do calcs*/

})

デモ: http://jsfiddle.net/3dPJA/1/

NaN両方の選択が行われていない場合は取得できないように、計算コードを変更する必要があります

于 2012-12-01T18:29:30.723 に答える