为什么 jQuery 减法输出 NaN？
Why is a jQuery subtraction outputting NaN?
我在尝试执行减法的这段 jquery 代码 white 时遇到了问题。我是什么missing/over-looking？当我将一个项目添加到列表中然后想要删除它时，右上角的估计总数不会反映该项目的删除。然后它吐出一个 NaN 错误。
在 js 部分查找带有 ***** 的注释中的代码。
我尝试使用和不使用 parseFloat 以及 parseInt 的变量 'currTotal' 和 'deleted'... 仍然出现 NaN 错误。
谢谢，
塞尔吉奥
P.S。这是一个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 * = .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="[=13=]" 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>
发生这种情况是因为您的“估计总计”值前面有一个美元符号。当你调用 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 * = .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="[=12=]" 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>
我想补充一点。
Note: Only the first number in the string is returned!
Note: Leading and trailing spaces are allowed.
Note: If the first character cannot be converted to a number, parseFloat() returns NaN.
你可以这样使用。
$('#total-items').val().replace('$','')
我在尝试执行减法的这段 jquery 代码 white 时遇到了问题。我是什么missing/over-looking？当我将一个项目添加到列表中然后想要删除它时，右上角的估计总数不会反映该项目的删除。然后它吐出一个 NaN 错误。
在 js 部分查找带有 ***** 的注释中的代码。
我尝试使用和不使用 parseFloat 以及 parseInt 的变量 'currTotal' 和 'deleted'... 仍然出现 NaN 错误。
谢谢，
塞尔吉奥
P.S。这是一个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 * = .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="[=13=]" 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>
发生这种情况是因为您的“估计总计”值前面有一个美元符号。当你调用 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 * = .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="[=12=]" 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>
我想补充一点。
Note: Only the first number in the string is returned!
Note: Leading and trailing spaces are allowed.
Note: If the first character cannot be converted to a number, parseFloat() returns NaN.
你可以这样使用。
$('#total-items').val().replace('$','')