问Javascript -尝试在循环数组对象值之后将它们相加在一起
EN

Stack Overflow用户

提问于 2018-08-28 01:05:51

回答 3查看 200关注 0票数 0

我正试着做一个迷你的结账JavaScript练习。用户将2个或更多项目添加到一起(checkbox)选项，项目的价格将被合计，然后返回。由于某些原因，我不能将数组对象的值相加在一起。我的代码中的其他所有东西都只工作在这1个部分。有人能帮帮我吗？我的代码如下：

JavaScript

// This Array Object holds the items name and prices the user selects from
var shoppingItems = {
  "Stainless Steel Cooking Pot": 29.99,
  "Mini Stainless Steel Blender": 19.99,
  "Kitchen Towel Set": 7.99,
  "Large Tan Coffee Mug": 5.49,
  "5 Round Dinner Plate Set": 5.99,
  "Salt and Pepper Shaker Set": 1.99,
  "Large Blue Broom": 3.98,
  "Pink Soap Dish": 2.50,
  "Silver Bathroom Trash Can": 6.99,
  "Silk Black Bathroom Robe": 9.99,
};

var itemsSelectedValues = [];
// this is the empty array where the checkbox values will be added to

var total = 0;
 // this is the variable that will hold the items total

function listOfCheckedItems(catalogToLookFrom) {
  var yourItemsPurchased = $("input:checkbox:checked");
  for (i = 0; i < yourItemsPurchased.length; i++) {
      if(yourItemsPurchased[i].checked === true) {
       itemsSelectedValues.push(yourItemsPurchased[i].value);
      } // line closes if statement
  } // line closes for loop
  for (i = 0; i < itemsSelectedValues.length; i++) {
    // line above is suppose to loop through the now full array that has the items value names stored
    total = total + catalogToLookFrom[itemsSelectedValues];
    // this line is suppose to set variable total to itself + the value of the item that's stored in array shoppingItems. It's suppose to do this each time through the loop. This is where the problem lies. 
  } // closes for loop
  console.log(catalogToLookFrom[itemsSelectedValues]);
  return total;
} // line closes listOfCheckedItems function

function getOrderTotal() {
  listOfCheckedItems(shoppingItems);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="cash-register.html" method="post">
    <p style="color:#A569BD; font-size:20px; text-decoration:underline; margin-left:20px;">Department Store Items</p>
    <input type="checkbox" name="products[]" value="Stainless Steel Cooking Pot">Stainless Steel Cooking Pot - $29.99<br>
    <input type="checkbox" name="products[]" value="Mini Stainless Steel Blender">Mini Stainless Steel Blender - $19.99<br>
    <input type="checkbox" name="products[]" value="Kitchen Towel Set">Kitchen Towel Set - $7.99<br>
    <input type="checkbox" name="products[]" value="Large Tan Coffee Mug">Large Tan Coffee Mug - $5.49<br>
    <input type="checkbox" name="products[]" value="5 Round Dinner Plate Set">5 Round Dinner Plate Set - $5.99<br>
    <input type="checkbox" name="products[]" value="Salt and Pepper Shaker Set">Salt and Pepper Shaker Set - $1.99<br>
    <input type="checkbox" name="products[]" value="Large Blue Broom">Large Blue Broom - $3.98<br>
    <input type="checkbox" name="products[]" value="Pink Soap Dish">Pink Soap Dish - $2.5<br>
    <input type="checkbox" name="products[]" value="Silver Bathroom Trash Can">Silver Bathroom Trash Can - $6.99<br>
    <input type="checkbox" name="products[]" value="Silk Black Bathroom Robe">Silk Black Bathroom Robe - $9.99
    <br/>
    <br/>
    <button type="button" name="yourOrder" onclick="getOrderTotal()">Submit</button>
    <br/>
    <br/>
</form>

javascript

jquery

arrays

shopping-cart

checkout

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-08-28 01:23:19

您忘记了循环中的i

total = total + catalogToLookFrom[itemsSelectedValues[i]];

下面是一个简单得多的版本

$(function() { // when the page loads
  $("input:checkbox").on("change", function() { // each time something changes
    var total = 0;
    $("input[type=checkbox]:checked").each(function() { // only checked boxes
      total += shoppingItems[this.value]; // the prices are already numbers
    })
    $("#total").text(total.toFixed(2)); // 2 decimals
  }).change(); // run at load time to calculate
})

// This Array Object holds the items name and prices the user selects from
var shoppingItems = {
  "Stainless Steel Cooking Pot": 29.99,
  "Mini Stainless Steel Blender": 19.99,
  "Kitchen Towel Set": 7.99,
  "Large Tan Coffee Mug": 5.49,
  "5 Round Dinner Plate Set": 5.99,
  "Salt and Pepper Shaker Set": 1.99,
  "Large Blue Broom": 3.98,
  "Pink Soap Dish": 2.50,
  "Silver Bathroom Trash Can": 6.99,
  "Silk Black Bathroom Robe": 9.99,
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="cash-register.html" method="post">
  <p style="color:#A569BD; font-size:20px; text-decoration:underline; margin-left:20px;">Department Store Items</p>
  <input type="checkbox" name="products[]" value="Stainless Steel Cooking Pot">Stainless Steel Cooking Pot - $29.99<br>
  <input type="checkbox" name="products[]" value="Mini Stainless Steel Blender">Mini Stainless Steel Blender - $19.99<br>
  <input type="checkbox" name="products[]" value="Kitchen Towel Set">Kitchen Towel Set - $7.99<br>
  <input type="checkbox" name="products[]" value="Large Tan Coffee Mug">Large Tan Coffee Mug - $5.49<br>
  <input type="checkbox" name="products[]" value="5 Round Dinner Plate Set">5 Round Dinner Plate Set - $5.99<br>
  <input type="checkbox" name="products[]" value="Salt and Pepper Shaker Set">Salt and Pepper Shaker Set - $1.99<br>
  <input type="checkbox" name="products[]" value="Large Blue Broom">Large Blue Broom - $3.98<br>
  <input type="checkbox" name="products[]" value="Pink Soap Dish">Pink Soap Dish - $2.5<br>
  <input type="checkbox" name="products[]" value="Silver Bathroom Trash Can">Silver Bathroom Trash Can - $6.99<br>
  <input type="checkbox" name="products[]" value="Silk Black Bathroom Robe">Silk Black Bathroom Robe - $9.99
  <br/>
  <br/>
  <button type="button" name="yourOrder">Submit</button>
  <br/>
  <br/>
</form>
Total: $<span id="total"></span>

票数 2

Stack Overflow用户

发布于 2018-08-28 01:13:45

你可以在这里使用一个不同的、更清晰的逻辑。

一旦使用jQuery选择了元素，就可以使用.each()遍历这些对象，其中this上下文将直接作为元素。

此外，您不需要包含值的数组，您可以简单地在each()函数中求和，然后以检索$ value的方式将选择的值传递给shoppingItems数组。在迭代结束时，您将获得总值。

正如我在答案的注释中所说，一旦你在jQuery中选择了被选中的那些，你就不需要检查this.checked === true了。

请看一下：

var shoppingItems = {
  "Stainless Steel Cooking Pot": 29.99,
  "Mini Stainless Steel Blender": 19.99,
  "Kitchen Towel Set": 7.99,
  "Large Tan Coffee Mug": 5.49,
  "5 Round Dinner Plate Set": 5.99,
  "Salt and Pepper Shaker Set": 1.99,
  "Large Blue Broom": 3.98,
  "Pink Soap Dish": 2.50,
  "Silver Bathroom Trash Can": 6.99,
  "Silk Black Bathroom Robe": 9.99,
};

function listOfCheckedItems(catalogToLookFrom) {
  var yourItemsPurchased = $("input:checkbox:checked");
  var totalValue = 0;
  yourItemsPurchased.each(function(){      
      totalValue += parseFloat(shoppingItems[this.value]);
  }) 
  
  
  console.log(totalValue);
  return totalValue;
}

function getOrderTotal() {
  listOfCheckedItems(shoppingItems);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="cash-register.html" method="post">
    <p style="color:#A569BD; font-size:20px; text-decoration:underline; margin-left:20px;">Department Store Items</p>
    <input type="checkbox" name="products[]" value="Stainless Steel Cooking Pot">Stainless Steel Cooking Pot - $29.99<br>
    <input type="checkbox" name="products[]" value="Mini Stainless Steel Blender">Mini Stainless Steel Blender - $19.99<br>
    <input type="checkbox" name="products[]" value="Kitchen Towel Set">Kitchen Towel Set - $7.99<br>
    <input type="checkbox" name="products[]" value="Large Tan Coffee Mug">Large Tan Coffee Mug - $5.49<br>
    <input type="checkbox" name="products[]" value="5 Round Dinner Plate Set">5 Round Dinner Plate Set - $5.99<br>
    <input type="checkbox" name="products[]" value="Salt and Pepper Shaker Set">Salt and Pepper Shaker Set - $1.99<br>
    <input type="checkbox" name="products[]" value="Large Blue Broom">Large Blue Broom - $3.98<br>
    <input type="checkbox" name="products[]" value="Pink Soap Dish">Pink Soap Dish - $2.5<br>
    <input type="checkbox" name="products[]" value="Silver Bathroom Trash Can">Silver Bathroom Trash Can - $6.99<br>
    <input type="checkbox" name="products[]" value="Silk Black Bathroom Robe">Silk Black Bathroom Robe - $9.99
    <br/>
    <br/>
    <button type="button" name="yourOrder" onclick="getOrderTotal()">Submit</button>
    <br/>
    <br/>
</form>

票数 0

Stack Overflow用户

发布于 2018-08-28 01:32:02

您可以使用array.reduce (参见docs中的reduce)将您的代码简化为一行代码：

$("input:checkbox:checked").toArray().reduce((a, e) => a + catalog[e.value], 0)

首先，在jQ集合上调用toArray()将其转换为普通数组。在此数组上调用的reduce函数将数组(e)中的每个元素传递给一个回调函数。reduce还接受第二个参数0，该参数累加最终的总数。这个总数被重复地传递到reduce回调的a参数中，并与从catalog对象获取的每个e值相加。

var shoppingItems = {
  "Stainless Steel Cooking Pot": 29.99,
  "Mini Stainless Steel Blender": 19.99,
  "Kitchen Towel Set": 7.99,
  "Large Tan Coffee Mug": 5.49,
  "5 Round Dinner Plate Set": 5.99,
  "Salt and Pepper Shaker Set": 1.99,
  "Large Blue Broom": 3.98,
  "Pink Soap Dish": 2.50,
  "Silver Bathroom Trash Can": 6.99,
  "Silk Black Bathroom Robe": 9.99,
};

const listOfCheckedItems = catalog =>
  $("input:checkbox:checked").toArray().reduce((a, e) => a + catalog[e.value], 0)
; 

function getOrderTotal() {
  console.log(listOfCheckedItems(shoppingItems));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="cash-register.html" method="post">
  <p style="color:#A569BD; font-size:20px; text-decoration:underline; margin-left:20px;">Department Store Items</p>
  <input type="checkbox" name="products[]" value="Stainless Steel Cooking Pot">Stainless Steel Cooking Pot - $29.99<br>
  <input type="checkbox" name="products[]" value="Mini Stainless Steel Blender">Mini Stainless Steel Blender - $19.99<br>
  <input type="checkbox" name="products[]" value="Kitchen Towel Set">Kitchen Towel Set - $7.99<br>
  <input type="checkbox" name="products[]" value="Large Tan Coffee Mug">Large Tan Coffee Mug - $5.49<br>
  <input type="checkbox" name="products[]" value="5 Round Dinner Plate Set">5 Round Dinner Plate Set - $5.99<br>
  <input type="checkbox" name="products[]" value="Salt and Pepper Shaker Set">Salt and Pepper Shaker Set - $1.99<br>
  <input type="checkbox" name="products[]" value="Large Blue Broom">Large Blue Broom - $3.98<br>
  <input type="checkbox" name="products[]" value="Pink Soap Dish">Pink Soap Dish - $2.5<br>
  <input type="checkbox" name="products[]" value="Silver Bathroom Trash Can">Silver Bathroom Trash Can - $6.99<br>
  <input type="checkbox" name="products[]" value="Silk Black Bathroom Robe">Silk Black Bathroom Robe - $9.99
  <br/>
  <br/>
  <button type="button" name="yourOrder" onclick="getOrderTotal()">Submit</button>
  <br/>
  <br/>
</form>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52043966

复制

相似问题

问Javascript -尝试在循环数组对象值之后将它们相加在一起
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript -尝试在循环数组对象值之后将它们相加在一起EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript -尝试在循环数组对象值之后将它们相加在一起
EN