Question

我正在使用一些使用font-awesome的微调器来设置带引导程序的输入类型编号，但是我遇到了事件值的问题，如果我在页面上有更多的输入类型编号它会改变所有这些的值，但我只需要那个一个被编辑的

这是我遇到问题的地方

(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

您需要在点击事件处理程序中使用at关键字来引用单击的按钮。从该元素，您可以遍历DOM以查找相关输入。试试这个：

＆＃13;

this

＆＃13;

$('.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;
  });
});

＆＃13;

.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;
}

＆＃13;

Answer 2

你可以使用nearest（）方法找到最近的微调器然后找到输入

(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);

更改第一个输入jquery的值

3 个答案: