Question

我试图在输入字段的变量上加上100。我是用这个Javascript做的：

$('.price').keyup(function () {
    var sum = 0;

    $('.price').each(function() {
        sum += Number($(this).val());
    });

    $('#totalPrice').val(sum);
});

它有效！但现在我需要做两件事;如果用户输入的值不是数字，或者总值超过100，则显示隐藏的div。

我是新的Javascript，我制作了这段代码，但显示错误对我来说是主要的话。

谢谢你们！

Answer 1

您可以在其中使用this关键字：

$('.price').keyup(function() {
  if (isNaN(this.value) || (!isNaN(this.value) && this.value > 100)) {
    // Do something.
    alert("No!");
    // Do not allow the function to proceed.
    return false;
  }
  var sum = 0;

  $('.price').each(function() {
    sum += Number($(this).val());
  });

  $('#totalPrice').val(sum);
});

Answer 2

工作小提琴：https://jsfiddle.net/ash06229/ydbjsx1z/

试试这个：

$('.price').keyup(function () {
    var sum = 0;
    $('.price').each(function() {
        if(sum <= 100)
        {
              $('.error').html("");
        sum += Number($(this).val());
      }
      else {
        $('.error').html("Sum is greater than 100").css("color","red");
      }
    });
        $('#totalPrice').val(sum);
});

Answer 3

你可能想要这样的东西：

＆＃13;

$('.price').keyup(function() {
  var sum = 0;
  $('.price').each(function() {
    var inputVal = +$(this).val(); //each field's value converted to number using "+"
    if (!isNaN(inputVal)) {
      sum += inputVal;
      $('.not-num-err').hide();
    } else {
      $('.not-num-err').show();
      return false; //stop iteration
    }
  });
  if (sum > 100) {
    $('.over-hundred-err').show();
  } else {
    $('.over-hundred-err').hide();
  }
  $('#totalPrice').val(sum);
});

＆＃13;

.hidden {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="price">
<input type="text" class="price">
<input type="text" class="price">
<div class="not-num-err hidden">You entered wrong number</div>
<div class="over-hundred-err hidden">Total is over 100!</div>
<p>
  <label for="totalPrice">Total Price</label>
  <input type="text" id="totalPrice">

＆＃13;

检查此link以获取有关一元加（+）运算符的详细信息。

总和值超过100时显示错误

3 个答案: