bootstrap中的輸入組按鈕，點擊加號加1，減1子

bootstrap 3輸入組按鈕，兩個按鈕之間的一個文本框，點擊'+'按鈕在文本框中添加一個，點擊' - '按鈕子1在文本框中。使用jquery。你可以幫我怎麼做？bootstrap中的輸入組按鈕，點擊加號加1，減1子

<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/

請不要爲按鈕或文本框，因爲我從jQuery的追加這取決於有多少張圖片是從API獲取添加ID。

來源

2015-04-06 Arun

更新了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) 
})

來源

2015-04-06 11:15:09

感謝花花公子。我嘗試與父母，父母，忘了兄弟姐妹。 :) – Arun 2015-04-06 11:18:16

你可以鏈接更新提琴在你的答案:) – WannaBeCoder 2015-04-06 11:52:21

鏈接更新小提琴：http://jsfiddle.net/kv0wvgex/1/ – 2015-04-06 11:59:41

這裏是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/

來源

2015-04-06 11:16:47 madalinivascu

我在我的頁面中有很多文本框，猜測它不適用於我的應用程序，謝謝你的答案。 – Arun 2015-04-06 11:22:50

在這裏使用HTML和引導找到代碼來創建數字上下用加號和減號按鈕

// 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 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

來源

2017-03-09 06:58:15

bootstrap中的輸入組按鈕，點擊加號加1，減1子

回答

相關問題