Question

按数量buttons时收到以下错误消息。

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

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

在当前代码下，keyup函数有效（如果我键入一个值，计数和更新总数）。

但是，如果我：

a）从[$input]
删除function updateCount($update, $input)
b）将var current = parseInt($input.val()) || 0;从[$input]更改为[$value]

keyup函数停止工作，buttons突然工作。

这是怎么回事？我如何使代码同时适用于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

由于在单击按钮时没有传递输入元素，在这种情况下为undefined，因此在评估condition check的值之前先添加input

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>

Answer 2

由于Roper和Age对您的问题发表了一些评论，而我没有足够的代表发表评论，因此我将尽力列出我发现的内容，并在此代码中进一步加以改进：

如果要确保用户在输入框中仅输入数字，只需更改 type =“ number” 而不是parseInt输入本身即可。
您在代码中使用了多个相同的 id 名称，我认为这不是一个好决定，因为您稍后可能需要访问元素
除了键入功能外，在这种情况下，也可以考虑应用 change 事件：）

ref：Differences between keyup() event and change() event in username live change

带有按键和按钮的parseInt

2 个答案: