Question

bootstrap 3输入组按钮，一个文本框之间有两个按钮，单击＆＃39; +＆＃39;按钮在文本框中添加一个，单击＆＃39; - ＆＃39;按钮子文本框中的一个。使用jquery。你能帮我怎么做吗？

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-white btn-minuse" type="button">-</button>
    </span>
    <input type="text" class="form-control no-padding add-color text-center height-25" maxlength="3" value="0">
    <span class="input-group-btn">
        <button class="btn btn-red btn-pluss" type="button">+</button>
    </span>
</div><!-- /input-group -->

http://jsfiddle.net/bsarunmca/kv0wvgex/

请不要为按钮或文本框添加ID，因为从jquery添加此内容取决于img从api获取的数量。

Answer 1

更新了fiddle。置于必需的jQuery下面

$('.btn-minuse').on('click', function(){
        $(this).parent().siblings('input').val(parseInt($(this).parent().siblings('input').val()) - 1)
})

$('.btn-pluss').on('click', function(){
        $(this).parent().siblings('input').val(parseInt($(this).parent().siblings('input').val()) + 1)
})

Answer 2

这是js：

$input = $('input[type="text"]');
//$input = $('.btn').parent().siblings('input');

$('.btn').on('click',function(){
     $val = $input.val();
    if ($(this).hasClass('btn-minuse')) {
     $input.val(parseInt($val)-1);
    } else
     //if ($(this).hasClass('btn-pluss'))
    {
    $input.val(parseInt($val)+1);
    }
});

jfidlle：http://jsfiddle.net/kv0wvgex/4/

Answer 3

请在此处找到带有html和bootstrap的代码，使用加号和减号按钮创建数字向上

// Jquery
$(document).on('click', '.value-control', function () {
    var action = $(this).attr('data-action')
    var min = $(this).attr('data-min')
    var max = $(this).attr('data-max')
    var target = $(this).attr('data-target')
    var value = parseFloat($('[id="' + target + '"]').val());
    if (action == "plus") {
        if (value < max) {
            value++;
        } 
    }
    if (action == "minus") {
        if (value > min) {
            value--;
        } 
    }
    $('[id="' + target + '"]').val(value)
})

和那个

的html代码

//Html Code
  <div class="input-group">
    <span class="input-group-btn"><button class="btn btn-default value-control" data-action="minus" data-min="0"  data-target="font-size"><span class="glyphicon glyphicon-minus"></span></button></span>
    <input type="text" value="1" class="form-control" id="font-size" />
    <span class="input-group-btn"><button class="btn btn-default value-control" data-action="plus" data-max="9" data-target="font-size"><span class="glyphicon glyphicon-plus"></span></button></span>
  </div>

参考：http://bootsnipp.com/snippets/a288y

在bootstrap中输入组按钮，单击加上一个，减去一个

3 个答案: