Question

我需要编写一个带有2个参数的函数，第一个参数是<li>元素的列表，第二个参数是一个对象。对象是产品及其价格的清单。所有<li>元素都将包含包含产品名称的文本。该功能应检查所提及的每种产品的价格，计算并返回总价。

示例：

<ul>
    <li>oreos<li/>
    <li>milk<li/>
<ul/>

let products = {
    oreos: 20,
    milk:  17,
    bread: 12,
    doritos: 10
}

我尝试使用for in / of循环来遍历product对象，并使用<li>将其与.innerText匹配，但是不确定如何去做。

请帮忙

Answer 1

您可以做的是，可以使用以下功能：

let totalPrice = (priceList, products) => {
return products.reduce((total, elem) => {
    total += priceList[elem.innerText];
    return total;
}, 0)

}

此函数使用Array.reduce对产品列表进行迭代，并添加产品价格列表并返回总计。

您应该检出Array.reduce()以便更清楚。

Answer 2

遍历li元素，使用它们的innerText作为键来查找价格，对它们求和，就可以了：

let total = 0;
document.querySelectorAll('li').forEach(item => {
  total += products[item.innerText];
});

还有其他形式，您可以添加一些其他内容（例如首先检查商品是否确实存在于产品数组中），但这是基本思想。

Answer 3

这就是您的函数的样子：

遍历所有列表项
获取项目的文本内容
使用文本内容作为键在产品对象中查找价格
添加到总数
返回总数

我使用Array.from()和Array.prototype.reduce()一次性完成了所有任务。当然，您将需要一个独特的类甚至是列表上的一个ID，而不是简单地选择页面上的所有列表项。

let products = {
    oreos: 20,
    milk:  17,
    bread: 12,
    doritos: 10
}

function getTotal(listElements, productPrices) {
  var total = Array.from(listElements).reduce(function(total, listItem) {
    total += productPrices[listItem.textContent] || 0;
    return total;
  }, 0);
  return total;
}

console.log(getTotal(document.querySelectorAll('li'), products));

<ul>
    <li>oreos</li>
    <li>milk</li>
</ul>

Answer 4

您可以添加一个ID，例如在您的<ul>中说“列表”，然后执行以下操作：

let list = document.getElementById("list");
let totals = {};

for(let key of products) {
    totals[key] = 0;
}

for(let i = 0; i < list.children.length; i++) {
    let child = list.children[i];

    let text = child.textContent;

    if(totals.hasOwnProperty(text)) {
        totals[text]++;
    }
}

let fullPrice = 0;

for(let key of products) {
    fullPrice += products[key] * totals[key];
}

console.log(fullPrice);

代码执行以下操作：

它将创建一个totals对象，该对象将计算products对象中每个现有产品的出现次数。
然后，它获取您的<ul>元素，并遍历其<li>子元素，获取每个<li>的文本并在totals对象中查找。
如果存在该产品，则会增加计数。
最后，它通过将总计乘以价格来计算最终的全价。

PS：该代码假定列表中只有<li>个元素，并且每个<li>仅包含文本。

Answer 5

您可以尝试使用querySelectorAll()和Array.prototype.reduce()。

请注意：：您以错误的方式（<li/>, <ul/>）关闭元素，这将创建意外的标记，应为</li>, </ul>。

let products = {
    oreos: 20,
    milk:  17,
    bread: 12,
    doritos: 10
};
function getTotal(li, prod){
  return Array.from(li).reduce((a,c) => a + prod[c.textContent], 0);
}
console.log(getTotal(document.querySelectorAll('li'), products));

<ul>
    <li>oreos</li>
    <li>milk</li>
</ul>

Answer 6

您的拳头需要修正您的尾标；斜杠位于最终标签名称之前。

第二，您可以通过获取文本值并在产品列表中查找来减少所有列表值。您可以使用Array.from将NodeList转换为数组，以便调用Array.prototype.reduce。

const products = {
    oreos: 20,
    milk:  17,
    bread: 12,
    doritos: 10
}

let total = calculateTotal(document.querySelector('ul.items'), products)

console.log(`Total = ${total}`)

function calculateTotal(ul, products) {
  return Array.from(ul.querySelectorAll('li'))
    .reduce((sum, li) => sum + products[li.textContent] || 0, 0)
}

<ul class="items">
    <li>oreos</li>
    <li>milk</li>
</ul>

Answer 7

使您朝正确的方向（未试）

来自：https://www.sitepoint.com/community/t/looping-through-li-elements-in-ul/6049/2 和Check if a key exists inside a json object

<ul id="foo">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

var ul = document.getElementById("foo");
var items = ul.getElementsByTagName("li");
for (var i = 0; i < items.length; ++i) {
  // do something with items[i], which is a <li> element
  if((items[i] in products)) alert("yeah");
}

另请阅读：Looping through list items with jquery

这应该使您朝正确的方向前进（甚至可以立即使用）。

相信这会有所帮助。

Answer 8

function getPrice()
{
    let products = {
        oreos: 20,
        milk:  17,
        bread: 12,
        doritos: 10
    }

    var items = document.getElementsByTagName("li");
    var price = 0;

    for (i = 0; i < items.length; i++) {
        var item = items[i];
        var val = parseFloat(products[item.innerHTML]);
        price += val;    
    }

    alert("Total price is: " + String(price));
}

然后可以将函数getPrice挂接到按钮的onclick属性上以查看结果。您可能想给列表一个类，或者给ul一个id，这样getPrice不会返回HTML页面上的所有列表。

如何计算和添加对象中键的值

8 个答案: