jQuery实现数字加减效果汇总

本文主要介绍jQuery实现数字加减效果的总结，包含多个实现方式的示例和详细实现步骤说明。

方式一：基于HTML5 input标签实现

HTML5新增input属性type="number"，可用于创建数字输入框。同时，使用jQuery的.val()方法可以获取或设置input元素的值，因此可以通过以下步骤实现数字加减效果：

1. 创建一个input元素，添加type="number"属性；
2. 在input元素前后添加加和减按钮，并添加相应的class和data属性；
3. 使用jQuery选择器获取相应的元素，并绑定click事件；
4. 在click事件处理函数中，获取input元素的值，执行加/减操作，并将结果设置为input元素的值。

示例代码如下：

<div class="number-input">
  <button class="minus" data-target=".number-input input">-</button>
  <input type="number" value="1" min="1" max="10">
  <button class="plus" data-target=".number-input input">+</button>
</div>

<script>
$(function() {
  $('.number-input button').on('click', function() {
    var target = $(this).data('target');
    var $input = $(target);
    var val = parseInt($input.val());
    if ($(this).hasClass('plus')) {
      val++;
    } else {
      val = val > 1 ? val - 1 : 1;
    }
    $input.val(val);
  });
});
</script>

方式二：基于自定义属性实现

另一种实现数字加减效果的方式是通过添加自定义属性来实现。具体步骤如下：

1. 创建一个元素，添加自定义属性data-value；
2. 在元素前后添加加和减按钮，并添加相应的class和data属性；
3. 使用jQuery选择器获取相应的元素，并绑定click事件；
4. 在click事件处理函数中，获取元素的data-value属性值，并执行加/减操作，并将结果更新到元素的data-value属性中。

示例代码如下：

<div class="number-input-alt" data-value="1">
  <button class="minus-alt" data-target=".number-input-alt">-</button>
  <span class="value-alt">1</span>
  <button class="plus-alt" data-target=".number-input-alt">+</button>
</div>

<script>
$(function() {
  $('.number-input-alt button').on('click', function() {
    var target = $(this).data('target');
    var $elem = $(target);
    var val = parseInt($elem.data('value'));
    if ($(this).hasClass('plus-alt')) {
      val++;
    } else {
      val = val > 1 ? val - 1 : 1;
    }
    $elem.data('value', val);
    $elem.find('.value-alt').text(val);
  });
});
</script>

以上两种方法都可以实现数字加减效果，具体选择哪种方式取决于具体的业务场景和页面需求。