javascript - 为什么 jQuery 减法输出 NaN？

Question

我在尝试执行减法时遇到了这段 jquery 代码的问题。我缺少/忽略的是什么？当我将一个项目添加到列表中然后想要删除它时，右上角的估计总数不会反射(reflect)该项目的删除。然后它吐出一个 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>

Answer 1

发生这种情况是因为您的“估计总计”值前面有一个美元符号。当您对其调用 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>