Question

我试图创建一个简单的数字微调器，您可以在其中单击+或 - 来更改div内的值。

代码无法按照我希望的方式运行。现在，单击+或-按钮不会更改该值。我做错了什么？

我的代码如下：

HTML

<div class="minus">-</div>
<input type="text" id="num" value="0" />
<div class="plus">+</div>

CSS

div {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid #000;
  margin: 20px 0 0 0;
}

div.minus,
div.plus {
  cursor: pointer;
}

JS

   $(".plus").click(function(){
       var quantity = parseInt($("#num").val()) +1;
       $("#num").val(quantity);
       return false;
   });

  $(".minus").click(function(){
       var quantity = parseInt($("#num").val()) -1;
       if(quantity < 0) quantity = 0;
       $("#num").val(quantity);
       return false;
   });

可以找到代码的工作示例here。

Answer 1

您需要使用.html()代替.val()来获取qty。此外，由于这是一个字符串，因此在进行数学运算之前需要在其上调用parseInt()。

$(document).ready(function() {

    $(".plus").click(function(){
        var newQty = parseInt($(".qty").html()) + 1;
        $(".qty").html(newQty);
    });

    $(".minus").click(function(){
        var newQty = parseInt($(".qty").html()) - 1;
        if(newQty < 0)newQty = 0;
            $(".qty").html(newQty);
    });

}）;

Answer 2

首先，我假设你在页面上包含了jQuery，并且没有在问题中引用它。如果你没有，请确保这样做。

以下是您要完成的完整工作示例：http://jsfiddle.net/tdfm3bpp/

你有几个问题。首先，您需要.html()。而不是.val()来获取div中的数字值。

其次，.html()的返回值是一个字符串。在进行必要的加法或减法之前，您需要使用parseInt()首先将字符串转换为整数。

最终工作代码（来自jsFiddle）如下：

<div class="minus">-</div>
<div class="qty">1</div>
<div class="plus">+</div>

div {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid #000;
  margin: 20px 0 0 0;
}

div.minus,
div.plus {
  cursor: pointer;
}

$(document).ready(function() {

  $(".plus").click(function(){
    var newQty = (parseInt($(".qty").html()) + 1);
    $(".qty").html(newQty);
  });

  $(".minus").click(function(){
    var newQty = (parseInt($(".qty").html()) - 1);
    if(newQty < 0)newQty = 0;
    $(".qty").html(newQty);
  });

});

Answer 3

你没有在笔中包含jQuery。
您已使用.text ()从div中提取数字而不是.val()。
您必须使用parseInt()将文本解析为整数。
您必须为newQty分配新值，而不是+=。

下面的代码和笔已修复了上述内容。

$(document).ready(function() {
  $(".plus").click(function(){
    $(".qty").text(parseInt(($(".qty").text())) + 1);
  });

  $(".minus").click(function(){
    $(".qty").text(Math.max(0, parseInt(($(".qty").text())) - 1));
  });
});

http://codepen.io/anon/pen/Lvakr

使用jQuery编号Spinner

3 个答案: