我对此感到困惑，所有的帮助都会受到赞赏。我试图将值添加到数组。现在我正在尝试确定我的输入中是否有数量，如果没有，那么我将添加项目价格时间数量。但是要添加所有价格，包括输入中没有数量的价格。
document.addEventListener('DOMContentLoaded', init);
var cartArray = [];
var ItemNode, quantityNode, costNode, submitButton, subtotalNode, totalNode, output;
function init(){
itemNode = document.querySelector('.input-item');
costNode = document.querySelectorAll('.posterPrice');
quantityNode = document.querySelectorAll('.qtyValue');
submitButton = document.querySelectorAll("button");
subtotalNode = document.getElementById('subtotal');
totalNode = document.querySelector('#total');
output = document.querySelector('.output');
for (var i = 0; i < submitButton.length; i++){
submitButton[i].addEventListener('click', function(event){
addPrice();
});
}
}
function addPrice(){
addToCart();
}
function addToCart(){
for (var k = 0; k < quantityNode.length; k++){
for (var j = 0; j < costNode.length; j++){
if(quantityNode[k].value !== false){
cartArray.push(costNode[j].innerText * quantityNode[k].value);
}
}
console.log(cartArray);
}
}/** {
outline: 2px solid red;
}
*/
#poster1 {
background-image: url(img/poster7.png);
background-size: 100% 100%;
width: 200px;
height: 300px;
background-color: blue;
display: inline-block;
}
#poster2 {
background-image: url(img/poster2.jpg);
background-size: 100% 100%;
width: 300px;
height: 200px;
background-color: blue;
display: inline-block;
}
.posterInfo {
position: relative;
margin-top: 300px;
}
.posterInfo input {
width: 45px;
}
/*.wrapper input {
width: 45px;
display: block;
}*/
.total {
position: absolute;
bottom: 0;
right: 0;
margin: 50px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gallery</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<h1 id='test'>Posters</h1>
<div class="posters">
<div id="poster1">
<div class="posterInfo">
<p>Price: $<span class="posterPrice">2.50</span></p>
<label for="qty" class="input-quantity">QTY:</label>
<input type="number" name="qty" class="qtyValue">
<button class="input-submit">Add to Cart</button>
</div>
</div>
<div id="poster2">
<div class="posterInfo">
<p>Price: $<span class="posterPrice">3.50</span></p>
<label for="qty" class="input-quantity">QTY:</label>
<input type="number" name="qty" class="qtyValue">
<button class="input-submit">Add to Cart</button>
</div>
</div>
</div>
<div id="poster3"></div>
<div id="poster4"></div>
<div id="poster5"></div>
</div>
<div class="total output">
<p>Subtotal: $<span id="subtotal"></span></p>
<p>Taxes: <span>$10.00</span></p>
<p>Shipping: <span>$10.00</span></p>
<p>Total: $<span id="total"></span></p>
</div>
<!--<script src="main.js"></script>-->
</body>
</html>
答案 0 :(得分：0)
我认为你想要的是计算物品的每个价格。您的代码问题是for-loop。
要计算每个价格，必须计算quantityNode和costNode之间的每个相同索引。也就是说，cartArray的第一项是quantityNode[0] * costNode[0]，第二项cartArray是quantityNode[1] * costNode[1]。
我建议您使用find找到值。如果您想在按下Add to Cart按钮时更新价格，则应重新初始化为cartArray，为空[]。
document.addEventListener('DOMContentLoaded', init);
var cartArray = [];
var ItemNode, quantityNode, costNode, submitButton, subtotalNode, totalNode, output;
function init(){
itemNode = document.querySelector('.input-item');
costNode = document.querySelectorAll('.posterPrice');
quantityNode = document.querySelectorAll('.qtyValue');
submitButton = document.querySelectorAll("button");
subtotalNode = document.getElementById('subtotal');
totalNode = document.querySelector('#total');
output = document.querySelector('.output');
for (var i = 0; i < submitButton.length; i++){
submitButton[i].addEventListener('click', function(event){
addPrice();
});
}
}
function addPrice(){
addToCart();
}
function addToCart(){
$('.posterInfo').each(function(idx, elem) {
cartArray.push(
$(elem).find('.posterPrice').text() * $(elem).find('.qtyValue').val()
);
});
console.log(cartArray);
}/** {
outline: 2px solid red;
}
*/
#poster1 {
background-image: url(img/poster7.png);
background-size: 100% 100%;
width: 200px;
height: 300px;
background-color: blue;
display: inline-block;
}
#poster2 {
background-image: url(img/poster2.jpg);
background-size: 100% 100%;
width: 300px;
height: 200px;
background-color: blue;
display: inline-block;
}
.posterInfo {
position: relative;
margin-top: 300px;
}
.posterInfo input {
width: 45px;
}
/*.wrapper input {
width: 45px;
display: block;
}*/
.total {
position: absolute;
bottom: 0;
right: 0;
margin: 50px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gallery</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
<h1 id='test'>Posters</h1>
<div class="posters">
<div id="poster1">
<div class="posterInfo">
<p>Price: $<span class="posterPrice">2.50</span></p>
<label for="qty" class="input-quantity">QTY:</label>
<input type="number" name="qty" class="qtyValue">
<button class="input-submit">Add to Cart</button>
</div>
</div>
<div id="poster2">
<div class="posterInfo">
<p>Price: $<span class="posterPrice">3.50</span></p>
<label for="qty" class="input-quantity">QTY:</label>
<input type="number" name="qty" class="qtyValue">
<button class="input-submit">Add to Cart</button>
</div>
</div>
</div>
<div id="poster3"></div>
<div id="poster4"></div>
<div id="poster5"></div>
</div>
<div class="total output">
<p>Subtotal: $<span id="subtotal"></span></p>
<p>Taxes: <span>$10.00</span></p>
<p>Shipping: <span>$10.00</span></p>
<p>Total: $<span id="total"></span></p>
</div>
<!--<script src="main.js"></script>-->
</body>
</html>