使用加号和减号增加数量，jQuery 不起作用

Quantity increase using plus and minus with jQuery not working

提问by Vikas Ghodke

Hi i am creating an input number increment using jQuery but no success yet can you please check my code and give me a proper guidance

嗨，我正在使用 jQuery 创建输入数字增量，但还没有成功，请检查我的代码并给我适当的指导

SEE THE DEMO HERE

在此处查看演示

HTML

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

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

});

回答by Rory McCrossan

The selector for finding your input was incorrect. .quntity-inputis a child of the .sp-quantitywhich is two levels above the button in the DOM, so you need to use closest()with a selector, not parent. Try this:

用于查找输入的选择器不正确。.quntity-input是.sp-quantityDOM 中按钮上方两级的子元素，因此您需要使用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);

});

Example fiddle

示例小提琴

You can also simplify your code:

您还可以简化代码：

$(".ddd").on("click", function() {
  var $button = $(this);
  var $input = $button.closest('.sp-quantity').find("input.quntity-input");

  $input.val(function(i, value) {
    return +value + (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>

回答by Arun P Johny

Your selector for input should be

您的输入选择器应该是

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

Demo: Fiddle

演示：小提琴

回答by Albzi

Is this what you mean?

你是这个意思吗？

Fiddle here

在这里摆弄

    $('.sp-plus').on('click', function(){
        var oldVal = $('input').val();
        var newVal = (parseInt($('input').val(),10) +1);
      $('input').val(newVal);
    });

    $('.sp-minus').on('click', function(){
        var oldVal = $('input').val();
        if (oldVal > 0)
        {
            var newVal = (parseInt($('input').val(),10) -1);
        }
        else
        {
            newVal = 0;
        }
        var newVal = (parseInt($('input').val(),10) -1);
        $('input').val(newVal);
    });