Question

我有一个脚本试图在其中提取当前输入的值。单击按钮可增加或减少输入。然后，我需要将此值用作您要购买的商品数量。但是，当我增加或减少金额时，它只会像这样更改值- 4 3 2 1饼干 3 4 3 2 1饼干 5 4 3 4 3 2 1 Cookies ..依此类推。

有没有一种方法可以简单地替换数量值而无需在数量值之前添加？

我当前的代码-

var newQty = 1;
var payFor = 'Cookies';
var PayAmount = 10.00;
$(".increment-quantity,.decrement-quantity").on("click", function(ev) {
  var currentQty = $('input[name="quantity"]').val();
  var qtyDirection = $(this).data("direction");



  if (qtyDirection == "1") {
    newQty = parseInt(currentQty) + 1;

  } else if (qtyDirection == "-1") {
    newQty = parseInt(currentQty) - 1;

  }

  // make decrement disabled at 1
  if (newQty == 1) {
    $(".decrement-quantity").attr("disabled", "disabled");
  }

  // remove disabled attribute on subtract
  if (newQty > 1) {
    $(".decrement-quantity").removeAttr("disabled");
  }

  if (newQty > 0) {
    newQty = newQty.toString();
    $('input[name="quantity"]').val(newQty);
  } else {
    $('input[name="quantity"]').val("1");
  }

  //User Amount Selection


  var payFor = $('#paymentBtn').data('pay_for');
  $('#paymentBtn').data('pay_for', newQty + ' ' + payFor);


  //for testing
  var newPayFor = $('#paymentBtn').data('pay_for');
  console.log(newPayFor);

  var finalPayAmount = (PayAmount * newQty);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="paymentBtn" data-pay_for="Cookies">
</div>
<div class="quanSelCont">
  <div class="prodQuan">
    <p>Quantity</p>
    <input data-min="1" data-max="0" type="text" name="quantity" value="1" readonly="true">
    <div class="quantity-selectors-container">
      <div class="quantity-selectors">
        <button type="button" class="increment-quantity" aria-label="Add one" data-direction="1"><span>&#43;</span></button>
        <button type="button" class="decrement-quantity" aria-label="Subtract one" data-direction="-1" disabled="disabled"><span>&#8722;</span></button>
      </div>
    </div>
  </div>
</div>

Answer 1

您的代码存在以下问题。

 var payFor = $('#paymentBtn').data('pay_for');
 $('#paymentBtn').data('pay_for', newQty + ' ' + payFor);

如您所见，payFor是ex 1 Cookie的字符串，当您向其附加新数量而不是增加值时。下面是一个简单的解决方案，我建议将数量和payFor作为单独的数据属性存储，并使用它们来显示。下面是相同的工作示例。

 $('#paymentBtn').data('pay_for_quantity',  newQty);

var newQty = 1;
var payFor = 'Cookies';
var PayAmount = 10.00;
$(".increment-quantity,.decrement-quantity").on("click", function(ev) {
  var currentQty = $('input[name="quantity"]').val();
  var qtyDirection = $(this).data("direction");



  if (qtyDirection == "1") {
    newQty = parseInt(currentQty) + 1;

  } else if (qtyDirection == "-1") {
    newQty = parseInt(currentQty) - 1;

  }

  // make decrement disabled at 1
  if (newQty == 1) {
    $(".decrement-quantity").attr("disabled", "disabled");
  }

  // remove disabled attribute on subtract
  if (newQty > 1) {
    $(".decrement-quantity").removeAttr("disabled");
  }

  if (newQty > 0) {
    newQty = newQty.toString();
    $('input[name="quantity"]').val(newQty);
  } else {
    $('input[name="quantity"]').val("1");
  }

  //User Amount Selection


  var payFor = $('#paymentBtn').data('pay_for');
  $('#paymentBtn').data('pay_for', payFor);
  $('#paymentBtn').data('pay_for_quantity', newQty);


  //for testing
  var newPayFor = $('#paymentBtn').data('pay_for_quantity') + ' ' + $('#paymentBtn').data('pay_for');
  console.log(newPayFor);

  var finalPayAmount = (PayAmount * newQty);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="paymentBtn" data-pay_for="Cookies">
</div>
<div class="quanSelCont">
  <div class="prodQuan">
    <p>Quantity</p>
    <input data-min="1" data-max="0" type="text" name="quantity" value="1" readonly="true">
    <div class="quantity-selectors-container">
      <div class="quantity-selectors">
        <button type="button" class="increment-quantity" aria-label="Add one" data-direction="1"><span>&#43;</span></button>
        <button type="button" class="decrement-quantity" aria-label="Subtract one" data-direction="-1" disabled="disabled"><span>&#8722;</span></button>
      </div>
    </div>
  </div>
</div>

这只是一个可能的解决方案。可以有更多。

希望这会有所帮助：）

Answer 2

您正在从data-pay_for中检索值，并连接一个整数，然后将其重新设置，因此每次将其添加到字符串中时。您可以像这样简化代码：

$(".increment-quantity,.decrement-quantity").on("click", function() {

  let currentQty = $('input[name="quantity"]').val();

  newQty = $(this).data("direction") == "1" ? parseInt(currentQty) + 1 : parseInt(currentQty) - 1;

  if (newQty == 1) {
    $(".decrement-quantity").attr("disabled", "disabled");
  } else if (newQty > 1) {
    $(".decrement-quantity").removeAttr("disabled");
  }

  $('input[name="quantity"]').val(newQty > 0 ? newQty : 1);

  console.log(newQty + ' ' + $('#paymentBtn').data('pay_for'));



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="paymentBtn" data-pay_for="Cookies"></div>
<p>Quantity</p>
<input data-min="1" data-max="0" type="text" name="quantity" value="1" readonly="true">
<button type="button" class="increment-quantity" data-direction="1">&#43;</button>
<button type="button" class="decrement-quantity" data-direction="-1" disabled="disabled">&#8722;</button>

替换输入jQuery的先前值

2 个答案: