变化时增加和减少价格值答案

【问题标题】：Increment and Decrement price value on Change变化时增加和减少价格值
【发布时间】：2017-10-19 20:57:43
【问题描述】：

我正在尝试做一个与递增和递减按钮同步的价格计数器，但是当我单击其中一个按钮 (+/-) 时价格没有变化，这不起作用，我该如何解决这个问题？谢谢！！！

$('#plus').click(function add() {
    var $qtde = $("#quantity");
    var a = $qtde.val();
    
    a++;
    $("#minus").attr("disabled", !a);
    $qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());

$('#minus').click(function minust() {
    var $qtde = $("#quantity");
    var b = $qtde.val();
    if (b >= 1) {
        b--;
        $qtde.val(b);
    }
    else {
        $("#minus").attr("disabled", true);
    }
});

/* On change */
$(document).ready(function()
{
    function updatePrice()
    {
        var price = parseFloat($("#quantity").val());
        var total = (price + 1) * 1.05;
        var total = total.toFixed(2);
        $("#total-price").val(total);
    }
    $(document).on("change, keyup, focus", "#quantity", updatePrice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value=""/>

【问题讨论】：

对输入的逻辑更改不会触发更改事件。因此在更改数量时单击加号或减号不会触发更改事件。只需在逻辑更改数量值后调用 updatePrice 即可。尽管与其他绑定不同，这将是您如何在文档内准备好 updatePrice 范围的问题。

标签： javascript jquery onchange

【解决方案1】：

如果您将绑定更改为每次点击输入时更新，您将获得预期的行为。

$('#plus').click(function add() {
  var $qtde = $("#quantity");
  var a = $qtde.val();

  a++;
  $("#minus").attr("disabled", !a);
  $qtde.val(a);
});
$("#minus").attr("disabled", !$("#quantity").val());

$('#minus').click(function minust() {
  var $qtde = $("#quantity");
  var b = $qtde.val();
  if (b >= 1) {
    b--;
    $qtde.val(b);
  } else {
    $("#minus").attr("disabled", true);
  }
});

/* On change */
$(document).ready(function() {
  function updatePrice() {
    var price = parseFloat($("#quantity").val());
    var total = (price + 1) * 1.05;
    var total = total.toFixed(2);
    $("#total-price").val(total);
  }
  // On the click of an input, update the price
  $(document).on("click", "input", updatePrice);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="-" id="minus" />
<input type="text" id="quantity" value="" name="quantity" />
<input type="button" value="+" id="plus" />
<br />
<input id="total-price" readonly="readonly" value="" />

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>
<div class="sp-quantity">
    <div class="container" style=" font-size:14px; ">
         
      <div class="sp-input">
        <input type="text" class="quantity-input" value="1">

        <div class="button" style="cursor: pointer;">
            +
        </div>
        <div class="button" style="cursor: pointer;">
            -
        </div>
      </div>

     
      
      <p>custom filed</p>
      <div class="sp-input">
        <input type="text" class="quantity-input-db" value="1.8" step="1.8">

        <div class="button" style="cursor: pointer;"> 
            +
        </div>
        <div class="button" style="cursor: pointer;">
            -
        </div>

      </div>

     
    </div>
</div>  




<script type="text/javascript">
        // debugger;

$(document).ready(function () {
    $(".button").on("click", function() {
     
      var $db_value = $('.db_value').val();

      var $quantity = $('.quantity_input').val();

      var db_valu_fix = 1.8;

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

      var $db_value = $button.closest('.sp-quantity').find("input.quantity-input-db");

      var oldValue_db = $db_value.val();

        console.log(oldValue_db);
      

        if ($.trim($button.text()) == "+") {

            newVal = parseFloat(oldValue_q) + 1;

            newdbVal = parseFloat(oldValue_db) + 1;

            //newdbVal.toFixed(2);


        } 
        else {
        
            if (oldValue_q > 0) {

              newVal = parseFloat(oldValue_q) - 1;

              newdbVal = parseFloat(oldValue_db) - 1;

              newdbVal = Math.round(newdbVal * 100) / 100;
            
            } else {

              newVal = 1;
            
            }

        }

        $input.val(newVal);
        $db_value.val(newdbVal);
    });


    // $(".ddd").on("click", function(step) {
    //  var a=$(".quantity-input").val();
    //  var attr=$(".quantity-input").attr(step);

    //  var getValue=a/1;
    //      console.log(attr);
    // });

});


</script>
</body>
</html>

【讨论】：