为啥jQuery减法输出NaN？

Posted 2023-03-11

技术标签:

【中文标题】为啥jQuery减法输出NaN？【英文标题】：Why is a jQuery subtraction outputting NaN?为什么jQuery减法输出NaN？ 【发布时间】：2016-07-01 19:29:08 【问题描述】：

我在尝试执行减法的这段 jquery 代码时遇到了问题。我错过/忽略了什么？当我将一个项目添加到列表中然后想要删除它时，右上角的估计总计不反映该项目的删除。然后它会吐出一个 NaN 错误。

在 js 部分中查找带有 ***** 的注释内的代码。

我尝试了使用和不使用 parseFloat 以及使用 parseInt 的变量 'currTotal' 和 'deleted'... 仍然得到 NaN 错误。

谢谢，

塞尔吉奥

附：这是jsfiddle demonstrating the code below

$(document).ready(function()

	$('.alert').hide();

// Check to see if input field is empty THEN if not empty add items, qty and price to list
	$('#add').on('click', function() 
		if ( !$('#list').val() ) 
			$('.alert').show();
    	
		else 
// Adds typed items, qty and price to the list
		// Adds Item and QTY to List
			var item = $('#list').val();
			var qty = $('#qty').val();
			$('#list-a').append('<li><div class="done"></div><div class="delete"></div><input type="text" disabled="disabled" name="listItem[]" class="listItemInput" value="' + qty + " - " + item + '"</li>');
		// Multiply QTY and Price. Ie: 2-bananas * $3 = $6.00
		// Adds Product to List
			var price = $('#price').val();
			var itemTotal = qty * price;
			$('#list-b').append('<li><span>$</span><input type="text" disabled="disabled" name="listPrice[]" class="listPriceInput" value="' + itemTotal + '"</li>');
		// Resets input field to empty and focus
			$('#list').val('').focus();
			$('#qty, #price').val('');
			
			$('.alert').hide();
		
	);

// Fires Add to List button when enter is clicked
	$('#list, #qty, #price').keyup(function(event)
    	if(event.keyCode === 13)
        	$('#add').click();
    	
	);

// Calculates and automatically updates Estimated Total
	$('#add').click( function() 
		var sumAdd = 0;
		$('input.listPriceInput').each(function() 
			sumAdd = sumAdd + parseFloat($(this).val());
		);
		$('#total-items').val('$' + sumAdd);
	);

// Marks as done by adding class strike by clicking the check mark
	$('#list-a').on('click', '.done', function () 
    var listItem = $(this).closest('li'),
        index = listItem.index();
		listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
		.toggleClass('strike');
	);

//******//
// Deletes/fades out 'li' when X is clicked	+ Updates Estimated Total
//******//
	$('#list-a').on('click', '.delete', function () 
    var listItem = $(this).closest('li'),
        index = listItem.index(),
        currTotal = parseFloat($('#total-items').val()),
        deleted	= parseFloat(listItem.parent().next('ul').find('li:eq(' + index + ')').val()),
        newTotal = currTotal - deleted;
		$('#total-items').val('$' + newTotal);
		listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem).slideUp(300, function () 
			$(this).remove();
    	);
	);
//******//
//******//

// Clear all items on the list and focus back on new shopping item
	$('#clear').on('click', function() 
		var li = $('li');
		li.slideUp(500, function() 
			$(li).remove('li');
		);
		$('#total-items').val('');
		$('#list').val('').focus();
		$('.alert').hide();
	);
);

@charset "UTF-8";
#content .est-total 
  *zoom: 1;

#content .est-total:before, #content .est-total:after 
  content: " ";
  display: table;

#content .est-total:after 
  clear: both;


* 
  padding: 0;
  margin: 0;
  font-family: "Open Sans";
  box-sizing: border-box;


html, body 
  display: table;
  height: 100%;
  width: 100%;


a 
  text-decoration: none;
  color: white;


#header 
  text-align: center;
  width: 100%;
  height: 330px;
  padding: 0;
  background: #222;
  border-bottom: 10px solid #1480ff;
  margin: -15px auto 0;

#header .logo 
  margin-top: 15px;

#header .logo h1 
  font-size: 70px;
  font-family: "Pacifico", cursive;
  letter-spacing: 1px;
  font-weight: 400;
  color: #20e010;
  display: inline-block;

#header .logo i 
  font-size: 50px;
  color: #20e010;
  padding: 15px;
  border: 5px solid #fff;
  border-radius: 45px;


#content 
  width: 100%;
  max-width: 650px;
  background-color: #fff;
  margin: -120px auto 50px;
  border: 10px solid #e2e2e2;
  padding: 20px;
  border-radius: 20px;
  position: relative;

#content .ribbon 
  width: 75px;
  height: 75px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 25px;
  text-transform: uppercase;
  text-align: center;
  background: #db0b0b;
  padding: 10px 0 0 5px;
  margin: -35px 0 0;
  display: inline-block;
  float: left;
  border-radius: 10px;

#content .est-total 
  text-align: right;
  padding: 0;
  margin-top: 0;

#content .est-total h2 
  font-size: 15px;
  line-height: 30px;
  font-style: italic;
  font-weight: 400;

#content h1 
  margin: -10px 0 20px;

#content h5 
  font-size: 22px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #1480ff;
  padding: 5px 3px 0;

#content #list-a 
  width: 78%;
  list-style: none;
  margin: 0 10px 30px 0;
  padding: 10px;
  float: left;

#content #list-a li 
  height: 43px;
  padding: 10px 10px;
  border-bottom: 1px solid #e2e2e2;
  text-transform: capitalize;

#content #list-b 
  width: 19%;
  list-style: none;
  margin: 0 0 30px 0;
  padding: 10px;
  float: left;

#content #list-b li 
  padding: 10px 10px;
  border-bottom: 1px solid #e2e2e2;
  text-transform: capitalize;

#content input 
  font-size: 15px;
  width: 68%;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.3);

#content input:focus 
  outline: none;

#content input#qty 
  width: 10%;

#content input#price 
  width: 20%;

#content input#total-items 
  font-size: 18px;
  color: red;
  font-weight: 700;
  width: 17%;
  display: inline-block;
  float: right;
  padding: 7px 9px;
  margin: -6px 0 0 10px;

#content button 
  width: 16%;
  font-size: 13px;
  border: none;
  padding: 10px 8px;
  margin: 10px 5px 0 0;
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;

#content #add 
  color: #444;
  background: #20e010;

#content #add:focus 
  outline: none;

#content #print 
  color: #fff;
  text-transform: uppercase;
  background: #1480ff;

#content #print:focus 
  outline: none;

#content #clear 
  color: #fff;
  text-transform: uppercase;
  background: red;
  float: right;

#content #clear:focus 
  outline: none;


.delete:before 
  font-family: "FontAwesome";
  content: "";
  font-size: 15px;
  display: inline-block;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: red;
  margin: -2px 15px 0 0;
  border-radius: 5px;
  padding: 3px 4px 5px 5px;
  cursor: pointer;
  float: left;


.done:before 
  font-family: "FontAwesome";
  content: "";
  font-size: 15px;
  display: inline-block;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #20e010;
  margin: -2px 5px 0 0;
  border-radius: 5px;
  padding: 3px 3px 5px 4px;
  cursor: pointer;
  float: left;


.strike 
  text-decoration: line-through;
  color: #1ccb0d;
  background-color: #e8f9e6;

.strike input 
  text-decoration: line-through;
  color: #1ccb0d;


.alert 
  font-size: 13px;
  color: #aaa;
  position: absolute;
  bottom: 115px;
  padding: 5px 8px;

.alert strong 
  color: red;


.alert:before 
  font-family: "FontAwesome";
  content: "";
  color: red;
  font-size: 12px;


.footer 
  width: 100%;
  height: 100px;
  background: #e2e2e2;
  border-top: 10px solid #1480ff;
  display: table-row;

.footer .disc 
  height: 100px;
  font-size: 14px;
  padding: 35px 0;
  text-align: center;
  border-top: 10px solid #1480ff;
  position: relative;

.footer a 
  color: red;
  font-weight: 700;

.footer a:hover 
  color: #e30000;
  text-decoration: underline;

.footer a:hover:before 
  height: 42px;
  padding: 5px 10px;
  opacity: 1;

.footer a:before 
  content: attr(data-sim);
  width: 105px;
  height: 0;
  color: #fff;
  font-weight: 300;
  font-size: 13px;
  background-color: #444;
  padding: 0 10px;
  border-radius: 5px;
  position: absolute;
  overflow: hidden;
  bottom: 55px;
  margin-left: -33px;
  opacity: 0;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;


input.listItemInput, input.listPriceInput 
  border: 0 transparent none !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;

<!DOCTYPE html>
<html> 
  <head>
    <title>My List brought to by: mylist.shop</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="fonts/css/font-awesome.min.css">
  </head>
  <body>
    <div id="header">
      <div class="logo">
        <h1>SomeList</h1>
      </div>
    </div>
    <div id="content">
      <div class="ribbon">New List</div>
      <div class="est-total"> 
        <h2>Estimated Total: 
          <input id="total-items" type="text" name="total price" placeholder="$0" readonly>
        </h2>
      </div>
      <ul id="list-a"></ul>
      <ul id="list-b"></ul>
      <div class="alert"> <strong>ALERT - </strong>	Please enter a new List Item Below.</div>
      <input id="list" type="text" name="list" placeholder="New List Item" autofocus required>
      <input id="qty" type="number" name="quantity" placeholder="Qty.">
      <input id="price" type="number" name="price" placeholder="Est. Price">
      <button id="add" type="button" value="Print List">ADD</button>
      <button id="print" type="button" onClick="window.print()" value="Print List">Print</button>
      <button id="clear">Clear</button>
    </div>
    <div class="footer">
      <div class="disc">© Copyright 2016 SomeList.</div>
    </div>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="js/min/main-min.js"></script>
  </body>
</html>

【问题讨论】：

请记录他们的值并向我们展示你得到了什么。我认为你需要检查 $('#total-items').val() 的值是什么，因为 parseFloat 似乎在告诉你，“嘿，我需要一个数字才能工作，而你没有给我一个” @ScottMarcus 如果我在 click 函数之外运行 console.log，我会得到正确的数字......这意味着如果我添加更多项目，console.log 会准确反映“估计总数”。但是，在删除项目时，我还会在控制台中收到“NaN”错误。 @Bergi 正如我在上面的评论中提到的，当我运行 console.log 时它会检索准确的值，但是一旦我删除了一个项目，我也会在控制台上得到 NaN 错误 【参考方案1】：

发生这种情况是因为您的 Estimated Total 在值之前有一个美元符号。当您为此调用parseFloat() 时，您会得到NaN。

与其在删除某些内容时从总数中减去，不如重新计算总数？你已经拥有了这样的功能：

$(document).ready(function() 

    $('.alert').hide();

    // Check to see if input field is empty THEN if not empty add items, qty and price to list
    $('#add').on('click', function() 
        if (!$('#list').val()) 
            $('.alert').show();
         else 
            // Adds typed items, qty and price to the list
            // Adds Item and QTY to List
            var item = $('#list').val();
            var qty = $('#qty').val();
            $('#list-a').append('<li><div class="done"></div><div class="delete"></div><input type="text" disabled="disabled" name="listItem[]" class="listItemInput" value="' + qty + " - " + item + '"</li>');
            // Multiply QTY and Price. Ie: 2-bananas * $3 = $6.00
            // Adds Product to List
            var price = $('#price').val();
            var itemTotal = qty * price;
            $('#list-b').append('<li><span>$</span><input type="text" disabled="disabled" name="listPrice[]" class="listPriceInput" value="' + itemTotal + '"</li>');
            // Resets input field to empty and focus
            $('#list').val('').focus();
            $('#qty, #price').val('');

            $('.alert').hide();
            calcTotal();
        
    );

    // Fires Add to List button when enter is clicked
    $('#list, #qty, #price').keyup(function(event) 
        if (event.keyCode === 13) 
            $('#add').click();
        
    );

    // Calculates and automatically updates Estimated Total
    function calcTotal() 
        var sumAdd = 0;
        $('input.listPriceInput').each(function() 
            sumAdd = sumAdd + parseFloat($(this).val());
        );
        $('#total-items').val('$' + sumAdd);
    

    // Marks as done by adding class strike by clicking the check mark
    $('#list-a').on('click', '.done', function() 
        var listItem = $(this).closest('li'),
            index = listItem.index();
        listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem)
            .toggleClass('strike');
    );

    //******//
    // Deletes/fades out 'li' when X is clicked	+ Updates Estimated Total
    //******//
    $('#list-a').on('click', '.delete', function() 
        var listItem = $(this).closest('li'),
            index = listItem.index();

        listItem.parent().next('ul').find('li:eq(' + index + ')').add(listItem).slideUp(300, function() 
            $(this).remove();
            calcTotal();
        );
    );
    //******//
    //******//

    // Clear all items on the list and focus back on new shopping item
    $('#clear').on('click', function() 
        var li = $('li');
        li.slideUp(500, function() 
            $(li).remove('li');
        );
        $('#total-items').val('');
        $('#list').val('').focus();
        $('.alert').hide();
    );
);

@charset "UTF-8";
#content .est-total 
  *zoom: 1;

#content .est-total:before, #content .est-total:after 
  content: " ";
  display: table;

#content .est-total:after 
  clear: both;


* 
  padding: 0;
  margin: 0;
  font-family: "Open Sans";
  box-sizing: border-box;


html, body 
  display: table;
  height: 100%;
  width: 100%;


a 
  text-decoration: none;
  color: white;


#header 
  text-align: center;
  width: 100%;
  height: 330px;
  padding: 0;
  background: #222;
  border-bottom: 10px solid #1480ff;
  margin: -15px auto 0;

#header .logo 
  margin-top: 15px;

#header .logo h1 
  font-size: 70px;
  font-family: "Pacifico", cursive;
  letter-spacing: 1px;
  font-weight: 400;
  color: #20e010;
  display: inline-block;

#header .logo i 
  font-size: 50px;
  color: #20e010;
  padding: 15px;
  border: 5px solid #fff;
  border-radius: 45px;


#content 
  width: 100%;
  max-width: 650px;
  background-color: #fff;
  margin: -120px auto 50px;
  border: 10px solid #e2e2e2;
  padding: 20px;
  border-radius: 20px;
  position: relative;

#content .ribbon 
  width: 75px;
  height: 75px;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 25px;
  text-transform: uppercase;
  text-align: center;
  background: #db0b0b;
  padding: 10px 0 0 5px;
  margin: -35px 0 0;
  display: inline-block;
  float: left;
  border-radius: 10px;

#content .est-total 
  text-align: right;
  padding: 0;
  margin-top: 0;

#content .est-total h2 
  font-size: 15px;
  line-height: 30px;
  font-style: italic;
  font-weight: 400;

#content h1 
  margin: -10px 0 20px;

#content h5 
  font-size: 22px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #1480ff;
  padding: 5px 3px 0;

#content #list-a 
  width: 78%;
  list-style: none;
  margin: 0 10px 30px 0;
  padding: 10px;
  float: left;

#content #list-a li 
  height: 43px;
  padding: 10px 10px;
  border-bottom: 1px solid #e2e2e2;
  text-transform: capitalize;

#content #list-b 
  width: 19%;
  list-style: none;
  margin: 0 0 30px 0;
  padding: 10px;
  float: left;

#content #list-b li 
  padding: 10px 10px;
  border-bottom: 1px solid #e2e2e2;
  text-transform: capitalize;

#content input 
  font-size: 15px;
  width: 68%;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.3);

#content input:focus 
  outline: none;

#content input#qty 
  width: 10%;

#content input#price 
  width: 20%;

#content input#total-items 
  font-size: 18px;
  color: red;
  font-weight: 700;
  width: 17%;
  display: inline-block;
  float: right;
  padding: 7px 9px;
  margin: -6px 0 0 10px;

#content button 
  width: 16%;
  font-size: 13px;
  border: none;
  padding: 10px 8px;
  margin: 10px 5px 0 0;
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
  display: inline-block;

#content #add 
  color: #444;
  background: #20e010;

#content #add:focus 
  outline: none;

#content #print 
  color: #fff;
  text-transform: uppercase;
  background: #1480ff;

#content #print:focus 
  outline: none;

#content #clear 
  color: #fff;
  text-transform: uppercase;
  background: red;
  float: right;

#content #clear:focus 
  outline: none;


.delete:before 
  font-family: "FontAwesome";
  content: "";
  font-size: 15px;
  display: inline-block;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: red;
  margin: -2px 15px 0 0;
  border-radius: 5px;
  padding: 3px 4px 5px 5px;
  cursor: pointer;
  float: left;


.done:before 
  font-family: "FontAwesome";
  content: "";
  font-size: 15px;
  display: inline-block;
  font-weight: 700;
  color: #fff;
  text-align: center;
  background-color: #20e010;
  margin: -2px 5px 0 0;
  border-radius: 5px;
  padding: 3px 3px 5px 4px;
  cursor: pointer;
  float: left;


.strike 
  text-decoration: line-through;
  color: #1ccb0d;
  background-color: #e8f9e6;

.strike input 
  text-decoration: line-through;
  color: #1ccb0d;


.alert 
  font-size: 13px;
  color: #aaa;
  position: absolute;
  bottom: 115px;
  padding: 5px 8px;

.alert strong 
  color: red;


.alert:before 
  font-family: "FontAwesome";
  content: "";
  color: red;
  font-size: 12px;


.footer 
  width: 100%;
  height: 100px;
  background: #e2e2e2;
  border-top: 10px solid #1480ff;
  display: table-row;

.footer .disc 
  height: 100px;
  font-size: 14px;
  padding: 35px 0;
  text-align: center;
  border-top: 10px solid #1480ff;
  position: relative;

.footer a 
  color: red;
  font-weight: 700;

.footer a:hover 
  color: #e30000;
  text-decoration: underline;

.footer a:hover:before 
  height: 42px;
  padding: 5px 10px;
  opacity: 1;

.footer a:before 
  content: attr(data-sim);
  width: 105px;
  height: 0;
  color: #fff;
  font-weight: 300;
  font-size: 13px;
  background-color: #444;
  padding: 0 10px;
  border-radius: 5px;
  position: absolute;
  overflow: hidden;
  bottom: 55px;
  margin-left: -33px;
  opacity: 0;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;


input.listItemInput, input.listPriceInput 
  border: 0 transparent none !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;

<!DOCTYPE html>
<html> 
  <head>
    <title>My List brought to by: mylist.shop</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="fonts/css/font-awesome.min.css">
  </head>
  <body>
    <div id="header">
      <div class="logo">
        <h1>SomeList</h1>
      </div>
    </div>
    <div id="content">
      <div class="ribbon">New List</div>
      <div class="est-total"> 
        <h2>Estimated Total: 
          <input id="total-items" type="text" name="total price" placeholder="$0" readonly>
        </h2>
      </div>
      <ul id="list-a"></ul>
      <ul id="list-b"></ul>
      <div class="alert"> <strong>ALERT - </strong>	Please enter a new List Item Below.</div>
      <input id="list" type="text" name="list" placeholder="New List Item" autofocus required>
      <input id="qty" type="number" name="quantity" placeholder="Qty.">
      <input id="price" type="number" name="price" placeholder="Est. Price">
      <button id="add" type="button" value="Print List">ADD</button>
      <button id="print" type="button" onClick="window.print()" value="Print List">Print</button>
      <button id="clear">Clear</button>
    </div>
    <div class="footer">
      <div class="disc">© Copyright 2016 SomeList.</div>
    </div>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="js/min/main-min.js"></script>
  </body>
</html>

【讨论】：

是的，我确实尝试过那条路线（可能是更明智的路线），但由于某种原因无法找到解决方案，所以我回到了更长的路线，但它让我陷入了类似的境地情况。非常感谢。【参考方案2】：

我想补充一下。

注意：只返回字符串中的第一个数字！

注意：允许使用前导和尾随空格。

注意：如果第一个字符不能转换为数字，则parseFloat()返回NaN。

你可以这样使用。

$('#total-items').val().replace('$','')

【讨论】：

以上是关于为啥jQuery减法输出NaN？的主要内容，如果未能解决你的问题，请参考以下文章

为啥 Pearson 相关输出为 NaN？

为啥我的输出总是以 NaN 的形式出现，我期待输出作为我的系列数据？

为啥我得到 NaN 以及如何获得预期的输出？

为啥我的 tensorflow 模型输出在 x 个时期后变为 NaN？

jQuery计算NaN

为啥 Chrome 控制台中的 + 不再是 NaN？