javascript - 带有 keyup 和按钮的 parseInt

Question

当我按下数量按钮时，我收到以下错误消息。

"Uncaught TypeError: Cannot read property 'val' of undefined"

 var current = parseInt($input.val()) || 0;

使用当前代码，keyup 函数可以工作(如果我键入一个值，计数和总数会更新)。

但是，如果我:

a) remove [$input] from function updateCount($update, $input)

b) change var current = parseInt($input.val()) || 0; from [$input] to [$value]

keyup 功能停止工作，按钮 突然工作。

这是怎么回事？如何让代码同时适用于 keyup 和 button 功能？

$(function() {
  $(".count").each(function() {
    $(this).data("val", $(this).text());
  });
  $("input[name=quantity]").keyup(function() {
    updateCount(
      $(this)
      .closest(".items__item")
      .find(".count"),
      $(this)
    );
  });
  $(".qty-button").click(function(e) {
    e.preventDefault();
    updateCount($(this));
  });
});

function updateCount($update, $input) {
  var $item = $update.closest(".items__item");
  var fieldName = $update.attr("field");
  var $max = $item.find(".count");
  var $value = $item.find("input[name=" + fieldName + "]");
  var operation = $update.val();
  var limit = parseInt($max.data("val"));
  var current = parseInt($input.val()) || 0;
  var cost = $update.closest(".items__item").find(".cost").text().replace("$", "");
  var $total = $update.closest(".items__item").find(".total");

  $update.text(parseInt(limit - current));
  $total.text(cost * current);
  $total.closest(".total").prepend("$");

  if (current > limit) {
    $value.val(limit);
    $max.text('0');
    return;
  }
  if (current < 0) {
    $value.val("0");
    $max.text(limit);
    return;
  }
  //increment controller 
  if (operation == "+") {
    if (current + 1 <= limit && limit - current - 1 >= 0) {
      $value.val(current + 1);
      $max.text(limit - current - 1);
    }
  } else if (operation == "-") {
    if (current - 1 >= 0) {
      $value.val(current - 1);
      $max.text(limit - current + 1);
    }
  }
}

$(".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="qty-total">$0</div>
<div class="items__list">
  <div class="items__item">
    <div class="count" data-val="3">3</div>
    <div class="cost">$50</div>
    <div id='myform'>
      <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 class="total"></div>
    </div>
  </div>
  <div class="items__item">
    <div class="count" data-val="5">5</div>
    <div class="cost">$70</div>
    <div id='myform'>
      <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 class="total"></div>
    </div>
  </div>
</div>

Answer 1

因为您没有在单击按钮时传递 input 元素，并且在这种情况下它是 undefined 所以在评估 input 的值之前添加 condition check >

var current = 0;
if($input) { current = parseInt($input.val()) || 0; }

$(function() {
  $(".count").each(function() {
    $(this).data("val", $(this).text());
  });
  $("input[name=quantity]").keyup(function() {
    updateCount(
      $(this)
      .closest(".items__item")
      .find(".count"),
      $(this)
    );
  });
  $(".qty-button").click(function(e) {
    e.preventDefault();
    updateCount($(this));
  });
});

function updateCount($update, $input) {
  var $item = $update.closest(".items__item");
  var fieldName = $update.attr("field");
  var $max = $item.find(".count");
  var $value = $item.find("input[name=" + fieldName + "]");
  var operation = $update.val();
  var limit = parseInt($max.data("val"));
    var current = 0;
  if($input) { current = parseInt($input.val()) || 0; }

  var cost = $update.closest(".items__item").find(".cost").text().replace("$", "");
  var $total = $update.closest(".items__item").find(".total");

  $update.text(parseInt(limit - current));
  $total.text(cost * current);
  $total.closest(".total").prepend("$");

  if (current > limit) {
    $value.val(limit);
    $max.text('0');
    return;
  }
  if (current < 0) {
    $value.val("0");
    $max.text(limit);
    return;
  }
  //increment controller 
  if (operation == "+") {
    if (current + 1 <= limit && limit - current - 1 >= 0) {
      $value.val(current + 1);
      $max.text(limit - current - 1);
    }
  } else if (operation == "-") {
    if (current - 1 >= 0) {
      $value.val(current - 1);
      $max.text(limit - current + 1);
    }
  }
}

$(".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="qty-total">$0</div>
<div class="items__list">
  <div class="items__item">
    <div class="count" data-val="3">3</div>
    <div class="cost">$50</div>
    <div id='myform'>
      <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 class="total"></div>
    </div>
  </div>
  <div class="items__item">
    <div class="count" data-val="5">5</div>
    <div class="cost">$70</div>
    <div id='myform'>
      <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 class="total"></div>
    </div>
  </div>
</div>