Question

我如何将qtyplus的限制设置为直到.count的值才起作用？

我尝试将&& currentVal < $parent.find(".count"))放在qtyplus的点击功能上，以期找到该项目.count的价值，但没有任何运气。

$(function() {
  $(".count").each(function() {
    $(this).data("val", $(this).text());
  });
  $("input[name=quantity]").keyup(function() {
    updateCount(
      $(this)
      .closest(".items__item")
      .find(".count"),
      $(this)
    );
  });
  $(".qtyplus").click(function(e) {
    e.preventDefault();
    $parent = $(this).closest(".items__item");
    fieldName = $(this).attr("field");
    var currentVal = parseInt(
      $parent.find("input[name=" + fieldName + "]").val()
    );
    if (!isNaN(currentVal)) {
      $parent.find("input[name=" + fieldName + "]").val(currentVal + 1);
    } else {
      $parent.find("input[name=" + fieldName + "]").val(1);
    }
    updateCount(
      $parent.find(".count"),
      $parent.find("input[name=" + fieldName + "]")
    );
  });
  $(".qtyminus").click(function(e) {
    e.preventDefault();
    $parent = $(this).closest(".items__item");
    fieldName = $(this).attr("field");
    var currentVal = parseInt(
      $parent.find("input[name=" + fieldName + "]").val()
    );
    if (!isNaN(currentVal) && currentVal > 0) {
      $parent.find("input[name=" + fieldName + "]").val(currentVal - 1);
    } else {
      $parent.find("input[name=" + fieldName + "]").val(0);
    }
    updateCount(
      $parent.find(".count"),
      $parent.find("input[name=" + fieldName + "]")
    );
  });
});

function updateCount($count, $input) {
  var cost = $count
    .closest(".items__item")
    .find(".cost")
    .text()
    .replace("$", "");
  var $total = $count.closest(".items__item").find(".total");
  $count.text(parseInt($count.data("val")) - (parseInt($input.val()) || 0));
  $total.text(cost * (parseInt($input.val()) || 0));
  $total.closest(".total").prepend("$");
}
$(".qty").on("keydown keyup", function(e) {
  if (
    $(this).val() >
    parseInt(
      $(this)
      .closest(".items__item")
      .find(".count")
      .data("val")
    ) &&
    e.keyCode !== 46 && // keycode for delete
    e.keyCode !== 8 // keycode for backspace
  ) {
    e.preventDefault();
    $(this).val(
      parseInt(
        $(this)
        .closest(".items__item")
        .find(".count")
        .data("val")
      )
    );
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="items__item">
  <div class="count">3</div>
  <div id='myform' method='POST' action='#'>
    <label for="">qty </label>
    <input type='text' name='quantity' placeholder='amount...' value='0' class='qty' />
    <input type='button' value="-" class='qty-button qtyminus' field='quantity' />
    <input type='button' value="+" class='qty-button qtyplus' field='quantity' />
  </div>
</div>
<div class="items__item">
  <div class="count">5</div>
  <div id='myform' method='POST' action='#'>
    <label for="">qty </label>
    <input type='text' name='quantity' placeholder='amount...' value='0' class='qty' />
    <input type='button' value='-' class='qty-button qtyminus' field='quantity' />
    <input type='button' value='+' class='qty-button qtyplus' field='quantity' />
  </div>
</div>

Answer 1

首先，添加属性以存储您的限制数量

<div class="count" data-val="3">3</div>

将$(".qtyminus").click和$(".qtyplus").click合并为以下代码

$(".qty-button").click(function(e) {
    e.preventDefault();
    updateCount($(this));
});

以下是适用的代码：@chemitaxis

function updateCount($button) {

    var $parent = $button.closest(".items__item");
    var fieldName = $button.attr("field");
    var $count = $parent.find(".count");
    var $input = $parent.find("input[name=" + fieldName + "]");
    var operation = $button.val();
    var limit = parseInt($count.data("val"));
    var current = (parseInt($input.val()) || 0);

    if (current > limit) {
        $input.val(limit);
        $count.text('0');
        return;
    }

    if (current < 0) {
        $input.val('0');
        $count.text(limit);
        return;
    }

    if (operation == '+') {
        if (current + 1 <= limit && limit - current - 1 >= 0) {
            $input.val(current + 1);
            $count.text(limit - current - 1);
        }
    } else if (operation == '-') {
        if (current - 1 >= 0) {
            $input.val(current - 1);
            $count.text(limit - current + 1);
        }
    }
    ...continue other logic, like: calculate total
}

jQuery parseInt计数限制

1 个答案: