更改第一個輸入jQuery的值

Question

我正在使用一些帶有字體的微調器，以引導的樣式設置輸入類型號，但是事件值有問題，如果我在頁面上有更多輸入類型號，它會更改所有輸入值，但是我只需要那是編輯

這是我有問題的地方

(function ($) {
  $('.spinner .btn:first-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
  });
  $('.spinner .btn:last-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
  });
})(jQuery);

在這里您可以看到完整的示例

http://codepen.io/anon/pen/YGqLbv

Answer 1

您需要在click事件處理程序中使用this關鍵字來引用被單擊的按鈕。 從該元素中，您可以遍歷DOM來找到相關的輸入。 嘗試這個：

 $('.spinner .btn:first-of-type').on('click', function() { $(this).closest('.spinner').find('input').val(function(i, v) { return parseInt(v, 10) + 1; }); }); $('.spinner .btn:last-of-type').on('click', function() { $(this).closest('.spinner').find('input').val(function(i, v) { return parseInt(v, 10) - 1; }); }); 

 .spinner { width: 100%; } .spinner input { text-align: left; } .input-group-btn-vertical { position: relative; white-space: nowrap; width: 1%; vertical-align: middle; display: table-cell; } .input-group-btn-vertical > .btn { display: block; float: none; width: 100%; max-width: 100%; padding: 8px; margin-left: -1px; position: relative; border-radius: 0; } .input-group-btn-vertical > .btn:first-child { border-top-right-radius: 4px; } .input-group-btn-vertical > .btn:last-child { margin-top: -2px; border-bottom-right-radius: 4px; } .input-group-btn-vertical i { position: absolute; top: 0; left: 4px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="page-header"> <h1>Bootstrap 3 input-spinner</h1> </div> <div class="input-group spinner"> <input type="text" class="form-control" value="42"> <div class="input-group-btn-vertical"> <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button> </div> </div> <div class="input-group spinner"> <input type="text" class="form-control" value="42"> <div class="input-group-btn-vertical"> <button class="btn btn-default" type="button"><i class="fa fa-caret-up"></i></button> <button class="btn btn-default" type="button"><i class="fa fa-caret-down"></i></button> </div> </div> </div> 

Answer 2

您可以使用最近的（）方法來找到最接近的微調器，然后找到輸入

(function ($) {
  $('.spinner .btn:first-of-type').on('click', function() {
    $closest_input= $(this).closest('.spinner').find('input');
    $closest_input.val( parseInt($closest_input.val(), 10) + 1);
  });
  $('.spinner .btn:last-of-type').on('click', function() {
    $closest_input= $(this).closest('.spinner').find('input');
    $closest_input.val( parseInt($closest_input.val(), 10) - 1);
  });
})(jQuery);

Answer 3

Simplyfied：

(function ($) {
  $('.spinner .btn').on('click', function() {
    var down = $(this).is(':last-of-type');
    $(this).parents('.spinner').find('input').val(function(i, v) {
       return parseInt(v, 10) + 1 * (down ? -1 : 1);
    });
  });
})(jQuery);