奇怪的+=操作符问题在Javascript/jQuery中，NaN被返回而不是数值

问题在于行total += parseInt($(el).val());如果例如parseInt($(el).val())持有值200(我用警报确认)，则值设置为Total是NaN。如果我删除+以便total = parseInt($(el).val());，那么total将返回值200而不是NaN。有人知道是什么导致了NaN问题吗?由于

jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
path = (e.target.value);
//open callback function
$('#targetPane').load('path', function() {
//open callback contents 
function getTotal() {
var total = 0;
$("input, select").each(function(i, el) {
if ($(el).is("input:checked")) {
$($(el).data("rel")).show();
total += parseInt($(el).val());
alert("total=" + total);
} else {
$($(el).data("rel")).hide();
}
if ($(el).is("select")) {
if ($(el).val() !== "0") {
$($(el).data("rel")).html($(el).val()).show();
total += parseInt($(el).val());
}
}
});
return total;
}
$('input[type="checkbox"], select').change(function() {
//$(document).on('change', 'input', 'select', function() {
$("#sum").text(getTotal());
});
//close callback contents   
}); //close callback function
});
}); //close jQuery

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.load Test</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
</head>
<body class="py-4">
<main>
<div class="container">
<div class="row mb-3">
<select name="myCourses" id="courses" autocomplete="off">
<option value="" selected>Select</option>
<option value="includes/inc_1_working.html">Load inc_1.html</option>
<!-- assume more dropdown options -->
</select>
<!-- load include file here -->
<div id="targetPane"></div>
</div>
<!--close row-->
</div>
<!-- close container -->
</main>
</body>
</html>

加载到下面的文件:includes/inc_1_working.html

<table width="100%" id="form1">
<tr><div id="test"></div>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n1" value="200" data-rel="div.n1"> Show Price1
</label>
</td>
<td>
<div class="n1 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n2" value="200" data-rel="div.n2"> Show Price
</label>
</td>
<td>
<div class="n2 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" name="colorCheckbox" id="n3" value="200" data-rel="div.n3"> Show Price
</label>
</td>
<td>
<div class="n3 box">200</div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n4" data-rel="div.n4">
<option value="0" selected>Choose...</option>
<option value="10">item 1</option>
<option value="20">item 2</option>
</select>
</label>
</td>
<td>
<div class="n4"></div>
</td>
</tr>
<tr>
<td>
<label>
<select id="n5" data-rel="div.n5">
<option value="0" selected>Choose...</option>
<option value="3">item 1</option>
<option value="4">item 2</option>
</select>
</label>
</td>
<td>
<div class="n5"></div>
</td>
</tr>
<tr>
<td> Total: </td>
<td>
<div id='sum'>0</div>
</td>
</tr>
</table>

移除箭头函数jquery准备好了为我添加旧风格的作品

将parseInt()替换为Number()

解决方案:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.load Test</title> 
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/grid/">
<link href="https://getbootstrap.com/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">

jQuery($ => {
$('#courses').on('change', e => {
$('#targetPane').load(e.target.value);
path = (e.target.value);
//open callback function
$('#targetPane').load('path', function(){
//open callback contents 

//hide all values
$("#targetPane input, #targetPane select").each(function(i, el) {
$($(el).data("rel")).hide();
});

function getTotal() {

var total = 0;
$("#targetPane input, #targetPane select").each(function(i, el) {

if ($(el).is("input:checked")) {
$($(el).data("rel")).show();
total += parseInt($(el).val());

} else {
$($(el).data("rel")).hide();
}
if ($(el).is("select")) {
if ($(el).val() !== "0") {
$($(el).data("rel")).html($(el).val()).show();
total += parseInt($(el).val());

}
}
});

return total;

}
$('select #courses').change(function() {
$($(el).data("rel")).hide(getTotal());
});
$('#targetPane input[type="checkbox"], #targetPane select').change(function() {
//$(document).on('change', 'input', 'select', function() {
$("#sum").text(getTotal());
});

//close callback contents   
}); //close callback function
});  
}); //close jQuery
</script>
<link href="https://getbootstrap.com/docs/5.0/examples/grid/grid.css" rel="stylesheet">
</head>
<body class="py-4">
<main>
<div class="container">
<div class="row mb-3">
<select name="myCourses" id="courses" autocomplete="off">
<option value="0" selected>Select</option>
<option value="includes/inc_1_working.html">Load inc_1.html</option>
<!-- assume more dropdown options -->
</select>
<!-- load include file here -->
<div id="targetPane"></div>
</div>  <!--close row-->      
</div> <!-- close container -->
</main>
</body>
</html>

相关内容

最新更新

热门标签：