Question

我对JavaScript有点新鲜。我试图制作一些简单的代码来增加和减少购物车中的产品。这是小提琴：

HTML

<header>
  <nav>
    <ul>
      <li>A</li>
      <li class="active">B</li>
    </ul>
  </nav>
</header>
<main>
  <nav>
    <form>
      <h2>
Per Day
      </h2>
      <input type="radio" name="qty" value="5">5
      <input type="radio" name="qty" value="6">6
      <h2>
Days
</h2>
      <input type="radio" name="days" value="1">1
      <input type="radio" name="days" value="3">3
      <input type="radio" name="days" value="5">5
      <h2>
      Items
      </h2>
      <label>Apple</label>
      <img src="">
      <input value="0" class="number">
      <button class="decrement">-</button>
      <button class="increment">+</button>
      <label>Lemon</label>
      <img src="">
      <input value="0" class="number">
      <button class="decrement">-</button>
      <button class="increment">+</button>
    </form>
  </nav>
</main>

JS

$(document).ready(function() {
  $(".increment").click(function() {
    event.preventDefault();
    var $n = $(".number");
    $n.val(Number($n.val()) + 1);
  });
  $(".decrement").click(function() {
    event.preventDefault();
    var $n = $(".number");
    $n.val(Number($n.val()) - 1);
  });
});

如何让它影响按钮旁边的输入框？此外，我知道这可能是一种不好的方法 - 我怎样才能更好地做到这一点？

Answer 1

使用.prevAll与:first一起查找当前元素的previous-input-child。

正如Johnny Kutnowski在评论中所提到的，.prevAll()将获得匹配元素集中每个元素的所有先前兄弟。使用:first过滤所选元素。

使用classes代替重复的id属性。

$(document).ready(function() {
  $(".increment").click(function() {
    event.preventDefault();
    $(this).prevAll('input:first').val(function() {
      return Number(this.value) + 1;
    });
  });
  $(".decrement").click(function() {
    event.preventDefault();
    $(this).prevAll('input:first').val(function() {
      return Number(this.value) + -1;
    });
  });
});

.active {
  font-weight: underline;
}
label {
  display: block;
  font-weight: bold;
  padding: 20px 0 8px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<header>
  <nav>
    <ul>
      <li>A</li>
      <li class="active">B</li>
    </ul>
  </nav>
</header>
<main>
  <nav>
    <form>
      <h2>
Per Day
      </h2>
      <input type="radio" name="qty" value="5">5
      <input type="radio" name="qty" value="6">6
      <h2>
Days
</h2>
      <input type="radio" name="days" value="1">1
      <input type="radio" name="days" value="3">3
      <input type="radio" name="days" value="5">5
      <h2>
      Items
      </h2>
      <label>Apple</label>
      <input value="0">
      <button class="decrement">-</button>
      <button class="increment">+</button>
      <label>Lemon</label>
      <input value="0">
      <button class="decrement">-</button>
      <button class="increment">+</button>
    </form>
  </nav>
</main>

Fiddle Demo

Answer 2

将您的变量更改为此可以正常工作

var $n = $(this).parent().find('.number');

你必须告诉它找到你点击的项目。工作小提琴 https://jsfiddle.net/spadez/q9umfz8a/1/

Answer 3

首先，你的函数中有event.preventDefault();，但你实际上从未设置过事件（因此实际上并没有阻止默认操作），但这甚至不需要;您可以简单地将按钮设置为类型＆＃34;按钮＆＃34;像这样：

<button type="button" class="decrement">-</button>
<button type="button" class="increment">+</button>

如果您希望阻止默认操作，则只需设置如下事件：

$(".increment").click(function(event) { 
    //function code 
});

其次，选择器$('.number')选择器是不明确的，当按下递增或递减按钮时，两个输入都会受到影响，解决方法就是：

var $n = $(this).prevAll(".number:first");

这将导致仅选择前一个$('.number')。

以下是所有Javascript

$(document).ready(function() {

  $(".increment").click(function() {
    var $n = $(this).prevAll(".number:first");
    $n.val(Number($n.val()) + 1);
  });

  $(".decrement").click(function() {
    var $n = $(this).prevAll(".number:first");
    $n.val(Number($n.val()) - 1);
  });

});

这是一个工作小提琴：

https://jsfiddle.net/q9umfz8a/2/

另一种选择是使用HTML5输入类型＆＃34;数字＆＃34;其功能非常类似

<input type="number" value="0" class="number">

增加/减少jQuery影响错误输入

3 个答案:

Fiddle Demo