在 jQuery 不起作用的情况下使用加号和减号增加数量

Question

您好，我正在使用 jQuery 创建一个输入数字增量，但还没有成功，请您检查我的代码并给我一个正确的指导

在这里查看演示

HTML

 <div class="sp-quantity">
    <div class="sp-minus fff"> <a class="ddd" href="#">-</a></div>
    <div class="sp-input">
        <input type="text" class="quntity-input" value="1">
    </div>
    <div class="sp-plus fff"> <a class="ddd" href="#">+</a></div>
</div>

JS

 $(".ddd").on("click", function () {

    var $button = $(this);
    var oldValue = $button.parent().find("input .quntity-input").val();

    if ($button.text() == "+") {
        var newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 0) {
            var newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }

    $button.parent().find("input .quntity-input").val(newVal);

});

原文由 Vikas Ghodke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

用于查找输入的选择器不正确。 .quntity-input 是 .sp-quantity 的孩子，它比 DOM 中的按钮高两层，所以你需要使用 closest() 与 parent 选择器 --- 。试试这个：

 $(".ddd").on("click", function () {

    var $button = $(this);
    var oldValue = $button.closest('.sp-quantity').find("input.quntity-input").val();

    if ($button.text() == "+") {
        var newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 0) {
            var newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }

    $button.closest('.sp-quantity').find("input.quntity-input").val(newVal);

});

示例小提琴

您还可以简化代码：

 $(".ddd").on("click", function() {
  var $button = $(this);
  var $input = $button.closest('.sp-quantity').find("input.quntity-input");
  $input.val((i, v) => Math.max(0, +v + 1 * $button.data('multi')));
});

 .sp-quantity div { display: inline; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sp-quantity">
  <div class="sp-minus fff"><a class="ddd" href="#" data-multi="-1">-</a></div>
  <div class="sp-input">
    <input type="text" class="quntity-input" value="1" />
  </div>
  <div class="sp-plus fff"><a class="ddd" href="#" data-multi="1">+</a></div>
</div>

原文由 Rory McCrossan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您的输入选择器应该是

$button.closest('.sp-quantity').find("input.quntity-input")

演示： 小提琴

原文由 Arun P Johny 发布，翻译遵循 CC BY-SA 3.0 许可协议