1

寻求一些帮助，试图获取两个选定按钮的值，添加它们，然后输出答案......

我在这里整理了一个js fiddle，而 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 的起点......我还应该补充一点，我想使用 keyup 函数，这样答案就可以随时改变......

$('#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 回答