Question

您好我正在为学校做一个项目，我需要制作一些计数+1和+5以及-1和-5的东西，但是如果它达到0并按下-1按钮它会进入负。

我试过

if("#total" < 0)
{
    number = 0;
}

但它不起作用

到目前为止，这是我的代码：

 $(document).ready(function()
 {
    $("#add_buttonplus").click(function() {
       var $counter = $("#total");
       $counter.val(Number($counter.val()) + 1);
    });
 });

 $(document).ready(function() {
    $("#add_buttonminus").click(function()
    {
       var $counter = $("#total");
       $counter.val(Number($counter.val()) - 1);
    }
 });

 $(document).ready(function()
 {
    $("#add_buttonplus2").click(function() {
       var $counter = $("#total");
       $counter.val(Number($counter.val()) + 5);
    });
 });

 $(document).ready(function() {
    $("#add_buttonminus2").click(function()
    {
       var $counter = $("#total");
       $counter.val(Number($counter.val()) - 5);
    });
 });

我的HTML：

<html>
   <head>
      <!--Title of the Site-->
      <title>
      </title>
      <!-- Extern CSS -->
      <link rel="stylesheet" type="text/css" href="order.css">
      <!-- Jquery -->
      <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
      <!-- Extern JavaScript -->
      <script src="order.js" type="text/JavaScript"></script>
   </head>
   <body>
      <h1>
         Flower
      </h1>
      <div id='Flower'>
         <a href="#" id="add_buttonplus1"></a>
         <a href="#" id="add_buttonminus1"></a>
         <p id="Flowertekst1">
            Add 1 Kilo
         </p>
         <a href="#" onclick="" id="add_buttonplus2"></a>
         <a href="#" onclick="" id="add_buttonminus2"></a>
         <p id="Flowertekst2">
            Add 5 Kilo
         </p>
         <p id="Flowertotaal">
            Total:
         </p>
         <input type="text" value="1" id="total" readonly />
      </div>
   </body>
</html>

Answer 1

您必须添加一个if语句，以确保只要两个数字之间的差异小于0，输入的值就会设置为0.

  if((FlowerTotal - 5) < 0)
     $("#FlowerTotal").val(0);
  else 
     $("#FlowerTotal").val(FlowerTotal - 5);

这是更新的Html：

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <meta charset="utf-8" />
    <title>JS Bin</title>
</head>
<body>
    <h1>Flower</h1>
    <div id='Flower'>
        <p id="btnAdd1">Add 1 Kilo</p>
        <p id="btnAdd5">Add 5 Kilo</p>
        <p id="btnSub1">Subtract 1 Kilo</p>
        <p id="btnSub5">Subtract 5 Kilo</p>

        <p>Total:</p>
        <input id="FlowerTotal" type="text" value="1" id="total" readonly />
    </div>
</body>
</html>

这是jQuery / Javascript

$("#btnAdd5").click(function(){
  var FlowerTotal = parseInt($("#FlowerTotal").val());
  $("#FlowerTotal").val(FlowerTotal + 5);
}); 

$("#btnAdd1").click(function(){
  var FlowerTotal = parseInt($("#FlowerTotal").val());
  $("#FlowerTotal").val(FlowerTotal +1);
}); 


$("#btnSub5").click(function(){
  var FlowerTotal = parseInt($("#FlowerTotal").val());

  if((FlowerTotal - 5) < 0)
     $("#FlowerTotal").val(0);
  else 
     $("#FlowerTotal").val(FlowerTotal - 5);
}); 

$("#btnSub1").click(function(){
  var FlowerTotal = parseInt($("#FlowerTotal").val());
  if((FlowerTotal -1) < 0)
     $("#FlowerTotal").val(0);
  else 
     $("#FlowerTotal").val(FlowerTotal - 1);
});

您也可以在线查看：http://jsbin.com/EloSOTi/7/edit

如何设置增量最小值

1 个答案: