javascript - JQuery计算中的简单条件

Question

我遇到了(一个简单的)JQuery 问题。我正在尝试制作一个带有 1 个输入字段的简单实时成本计算器。现在，我想对输入变量使用不同的价格范围。例如:

• 输入值 1-15 为每个项目 4 个；
• 输入值 16-100 为每项 3 个；
• 输入值 100-200 为每项 2 个；
• 输入值高于 200 时，结果为“不要吃掉所有口香糖球”。

这是我到目前为止所拥有的:

$(document).ready(function() {
  $('#gummball').keyup(function() {
    $('#result').text($('#gummball').val() * 1.5);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Price of gummball:</label><input name="gummball" id="gummball" type="text" />
<br /> Total: &euro; <span id="result"></span>

希望大家能帮帮我! :)

Answer 1

$(document).ready(function() {
  $('#gummball').keyup(function() {
    if($('#gummball').val() > 0 && $('#gummball').val() < 16) {
    	$('#result').text($('#gummball').val() * 4);
    }
    if($('#gummball').val() > 15 && $('#gummball').val() < 101) {
    	$('#result').text($('#gummball').val() * 3);
    }
    if($('#gummball').val() > 100 && $('#gummball').val() < 201) {
    	$('#result').text($('#gummball').val() * 2);
    }
    if($('#gummball').val() > 200) {
    	$('#result').text('Don`t eat all the gummballs');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Price of gummball:</label>
<input name="gummball" id="gummball" type="text" />
<br /> Total: &euro; <span id="result"></span>