jQuery-文档ready（）的更新功能

Question

在value中输入input时，如何更新函数（可用的总数和数量）？该功能允许buttons更改input，但是当我在HTML中输入value时什么也没发生。

function updateCount(t, n) {
  var e = t
    .closest(".item")
    .find(".cost")
    .text()
    .replace("$", ""),
    a = t.closest(".item").find(".total");
  $(a).hide(),
    "0" !== $(n).val() && "" !== $(n).val() ?
    ($(a).show(),
      t.text(parseInt(t.data("val")) - (parseInt(n.val()) || 0)),
      a.text(e * (parseInt(n.val()) || 0)),
      a.closest(".total").prepend("$")) :
    $(a).hide();
}

$(".count").each(function() {
    $(this).data("val", $(this).text());
  }),
  $(document).on("click", ".qtyplus", function(t) {
    if (
      $(this)
      .closest(".item")
      .find(".count")
      .data("val") >=
      Number(
        $(this)
        .closest(".item")
        .find("input[name='quantity']")
        .val()
      ) +
      1
    ) {
      t.preventDefault(),
        ($parent = $(this).closest(".item")),
        (fieldName = $(this).attr("field"));
      var n = parseInt($parent.find("input[name=" + fieldName + "]").val());
      isNaN(n) ?
        $parent.find("input[name='" + fieldName + "']").val(1) :
        $parent.find("input[name='" + fieldName + "']").val(n + 1),
        updateCount(
          $parent.find(".count"),
          $parent.find("input[name='" + fieldName + "']")
        );
    }
  }),
  $(document).on("click", ".qtyminus", function(t) {
    if (
      Number(
        $(this)
        .closest(".item")
        .find("input[name='quantity']")
        .val()
      ) -
      1 >
      0
    ) {
      t.preventDefault(),
        ($parent = $(this).closest(".item")),
        (fieldName = $(this).attr("field"));
      var n = parseInt($parent.find("input[name=" + fieldName + "]").val());
      !isNaN(n) && 0 < n ?
        $parent.find("input[name=" + fieldName + "]").val(n - 1) :
        $parent.find("input[name=" + fieldName + "]").val(0),
        updateCount(
          $parent.find(".count"),
          $parent.find("input[name=" + fieldName + "]")
        );
    }
  });

.item {
  border: 1px solid;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='products'>
  <div class="item">
    <h4 class="count">350</h4>
    <span class='cost'>500</span>
    <input type='text' autocomplete="off" placeholder='amount...' name='quantity' value='1' class='qty' />
    <input type='button' value="-" class='qty-button qtyminus' field='quantity' />
    <input type='button' value="+" class='qty-button qtyplus' field='quantity' />
    <div class="total"></div>
  </div>
</div>

Answer 1

这会有所帮助

<input type="number" id="a"/>a
<div id="s">23</div>

$("#a").change(()=>{
var e=parseInt($("#s").text());
var f=parseInt($("#a").val());
alert((e+f));
$("#s").text(e+f);
})

它从输入框中获取div的值并将其相加。添加后，它将div中的旧值替换为新值。

Answer 2

我在输入中添加了脚本，所有计算值均已更改

function updateCount(t, n) {
  var e = t
    .closest(".item")
    .find(".cost")
    .text()
    .replace("$", ""),
    a = t.closest(".item").find(".total");
  $(a).hide(),
    "0" !== $(n).val() && "" !== $(n).val() ?
    ($(a).show(),
      t.text(parseInt(t.data("val")) - (parseInt(n.val()) || 0)),
      a.text(e * (parseInt(n.val()) || 0)),
      a.closest(".total").prepend("$")) :
    $(a).hide();
}

$(".count").each(function() {
    $(this).data("val", $(this).text());
  }),
  $(document).on("click", ".qtyplus", function(t) {
    if (
      $(this)
      .closest(".item")
      .find(".count")
      .data("val") >=
      Number(
        $(this)
        .closest(".item")
        .find("input[name='quantity']")
        .val()
      ) +
      1
    ) {
      t.preventDefault(),
        ($parent = $(this).closest(".item")),
        (fieldName = $(this).attr("field"));
      var n = parseInt($parent.find("input[name=" + fieldName + "]").val());
      isNaN(n) ?
        $parent.find("input[name='" + fieldName + "']").val(1) :
        $parent.find("input[name='" + fieldName + "']").val(n + 1),
        updateCount(
          $parent.find(".count"),
          $parent.find("input[name='" + fieldName + "']")
        );
    }
  }),
  $(document).on("click", ".qtyminus", function(t) {
    if (
      Number(
        $(this)
        .closest(".item")
        .find("input[name='quantity']")
        .val()
      ) -
      1 >
      0
    ) {
      t.preventDefault(),
        ($parent = $(this).closest(".item")),
        (fieldName = $(this).attr("field"));
      var n = parseInt($parent.find("input[name=" + fieldName + "]").val());
      !isNaN(n) && 0 < n ?
        $parent.find("input[name=" + fieldName + "]").val(n - 1) :
        $parent.find("input[name=" + fieldName + "]").val(0),
        updateCount(
          $parent.find(".count"),
          $parent.find("input[name=" + fieldName + "]")
        );
    }
  });
  $(document).on("input", ".qty", function(t) {
  value = $(this).val();
  if(parseInt($('.count').html()-$(this).val()) > 0){
    $('.count').html(349-$(this).val());
    $('.total').html("$"+500*$(this).val());
    }
    else{
    $(this).val(value.substr(0, value.length - 1));
    }
  });

.item {
  border: 1px solid;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='products'>
  <div class="item">
    <h4 class="count">350</h4>
    <span class='cost'>500</span>
    <input type='text' autocomplete="off" placeholder='amount...' name='quantity' value='1' class='qty' />
    <input type='button' value="-" class='qty-button qtyminus' field='quantity' />
    <input type='button' value="+" class='qty-button qtyplus' field='quantity' />
    <div class="total"></div>
  </div>
</div>

Answer 3

您可以使用JQuery的.keypress()事件。

$(document).on("keypress", ".qty", function(t) {
  ...
}

Answer 4

添加ID

<input type='text' id='currentQty' autocomplete="off" placeholder='amount...' name='quantity' value='1' class='qty' />

在js上添加

  $(document).on('keyup','.currentQty',function(){
    $('.count').html(350-$(this).val());
 $('.total').html("$"+500*$(this).val());
  });

玩得开心