JQuery 移动返回 NaN

JQuery mobile returns NaN

本文关键字:NaN 返回 移动 JQuery      更新时间:2023-09-26

所以我在尝试

$(function() {
  convertPrice = function() {
    var myAnswer, myVal, myRate;
    myVal = $('#slider1').val();
    myRate = $('#rate').val();
    myVal = parseFloat(myVal); // convert string  type 
    myAnswer = myVal * myRate;
    $('#Answer').val(myAnswer);
  }
  $("#convertButton").click(convertPrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div data-role="fieldcontain">
  <label for="R">Cost Per Person:</label>
  <input type="text" value="$990" name="rate" id="rate" readonly />
</div>
<label for="slider">Number of People Going?:</label>
<input type="range" name="slider" id="slider1" value="1" min="1" max="30" />
</div>
<input type="button" value="Convert" id="convertButton" />
<div data-role="fieldcontain">
  <label for="theAnswer">Results:</label>
  <input type="text" name="textInput" id="Answer" value="" readonly />
</div>

所以当我点击按钮时,它只是返回为 NaN?有什么建议吗?

对于费率输入框,您已在值标签中指定了 $。所以它给了NaN值。将该行代码更改为

$

那么它肯定会起作用

如前面的答案所述,$ 符号是问题所在。Yoo可以删除它将起作用的$ 符号。仍然如果您想保留该符号,那么使用regex您可以在进行计算时删除该符号

var myAnswer, myVal, myRate;
myVal = $('#slider1').val();
myRate =  $('#rate').val();
myVal = parseFloat(myVal); // convert string  type 
myRate = parseFloat(myRate.replace(/[^0-9'.-]+/g, "")); // here before convserting we need to use regex to replace $ with ""
myAnswer = myVal * myRate;
$('#Answer').val(myAnswer); 

使用它,但最好删除"$">

$(function() {
  convertPrice = function() {
    var myAnswer, myVal, myRate;
    myVal = $('#slider1').val();
    myRate = $('#rate').val();
    myRate = myRate.replace("$","");
    myVal = parseFloat(myVal); // convert string  type 
    myAnswer = myVal * myRate;
    $('#Answer').val(myAnswer);
  }
  $("#convertButton").click(convertPrice);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div data-role="fieldcontain">
  <label for="R">Cost Per Person:</label>
  <input type="text" value="$990" name="rate" id="rate" readonly />
</div>
<label for="slider">Number of People Going?:</label>
<input type="range" name="slider" id="slider1" value="1" min="1" max="30" />
</div>
<input type="button" value="Convert" id="convertButton" />
<div data-role="fieldcontain">
  <label for="theAnswer">Results:</label>
  <input type="text" name="textInput" id="Answer" value="" readonly />
</div>