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>

Answer 2

labels

$(document).ready(function() {
  $('#gummball').keyup(function() {
  if($('#gummball').val() <= 200)
    $('#result').html($('#gummball').val() * 1.5);
  else
    $('#result').html(($('#gummball').val() * 1.5) + " <br><b>Don't eat all the gummballs</b>");   
  });
});

JQuery计算中的简单条件

2 个答案: