我需要帮助创建一个函数:
-计算到目前为止用户在所有午餐时间输入的所有数字的总和，并将其存储在HTML页面中。(午餐+早餐+晚餐等)
-午餐时间所有菜肴的总和(午餐+午餐+午餐等)
有什么建议吗?以下是我到目前为止所做的(JS代码工作，但看起来很糟糕…):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<body>
<div>
<div>
<div>
<a>Sum</a><br>
<div>
<a class="expenses_sum_s_kcal"></a> kcal <b></b>
<a class="expenses_sum_s_fat"></a> g(fat) <b></b>
<a class="expenses_sum_s_protein"></a>g(protein)<b></b>
<a class="expenses_sum_s_carbs"></a> g(carbs) <b></b>
</div>
</div>
<ul>
<li> Lunch </li>
<ul>
<li class="expenses_s_kcal"> <b> 100 kcal </b></li>
<li class="expenses_s_fat"> <a> 10 g </a></li>
<li class="expenses_s_protein"> <c> 10 g </c></li>
<li class="expenses_s_carbs"> <d> 10 g </d></li>
</ul>
</ul>
<ul>
<li> Lunch </li>
<ul>
<li class="expenses_s_kcal"> <b> 200 kcal </b></li>
<li class="expenses_s_fat"> <a> 20 g </a></li>
<li class="expenses_s_protein"> <c> 20 g </c></li>
<li class="expenses_s_carbs"> <d> 20 g </d></li>
</ul>
</ul>
<ul>
<li> Breakfast </li>
<ul>
<li class="expenses_s_kcal"> <b> 300 kcal </b></li>
<li class="expenses_s_fat"> <a> 30 g </a></li>
<li class="expenses_s_protein"> <c> 30 g </c></li>
<li class="expenses_s_carbs"> <d> 30 g </d></li>
</ul>
</ul>
</div>
</div>
</body>
<script>
$(document).ready(function () {
var expenses = $('.expenses_s_kcal');
var expenseTotal = $('.expenses_sum_s_kcal');
expenseTotal.html('0');
$.each(expenses, function (index, object) {
var boldTag = $(object).find('b');
if (boldTag && boldTag.length > 0 && $(boldTag[0]).html() != '') {
expenseTotal.html(parseInt(expenseTotal.html()) + parseInt($(boldTag[0]).html().replace(/,/g, '')));
}
})
});
$(document).ready(function () {
var expenses = $('.expenses_s_fat');
var expenseTotal = $('.expenses_sum_s_fat');
expenseTotal.html('0');
$.each(expenses, function (index, object) {
var boldTag = $(object).find('a');
if (boldTag && boldTag.length > 0 && $(boldTag[0]).html() != '') {
expenseTotal.html(parseInt(expenseTotal.html()) + parseInt($(boldTag[0]).html().replace(/,/g, '')));
}
})
});
$(document).ready(function () {
var expenses = $('.expenses_s_protein');
var expenseTotal = $('.expenses_sum_s_protein');
expenseTotal.html('0');
$.each(expenses, function (index, object) {
var boldTag = $(object).find('c');
if (boldTag && boldTag.length > 0 && $(boldTag[0]).html() != '') {
expenseTotal.html(parseInt(expenseTotal.html()) + parseInt($(boldTag[0]).html().replace(/,/g, '')));
}
})
});
</script>
</body>
https://jsfiddle.net/amWilq/m734t5ko/13/
首先，您应该修复您的HTML标记-它无效。<ul>不能是<ul>的子元素，只有列表元素可以是<ul>的子元素。
创建一个初始化为0的和数组。遍历每个费用<li>，使用其在父节点中的位置索引来计算将其添加到哪个求和索引。
最后，再次遍历和，并将和赋值给total<div>中的相关索引。为了方便起见。将<span>s放在总div内，以指示填充结果的位置。
const targets = $('.target');
const sums = [...targets].map(_ => 0);
$('li li').each(function() {
const i = $(this).index();
sums[i] += Number(this.textContent.match(/d+/)[0]);
});
sums.forEach((sum, i) => {
targets[i].textContent = sum;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div>
<div>
<div>
<a>Sum</a><br>
<div>
<a class="expenses_sum_s_kcal"></a><span class="target"></span> kcal <b></b>
<a class="expenses_sum_s_fat"></a><span class="target"></span>g(fat) <b></b>
<a class="expenses_sum_s_protein"></a><span class="target"></span>g(protein)<b></b>
<a class="expenses_sum_s_carbs"></a><span class="target"></span>g(carbs) <b></b>
</div>
</div>
<ul>
<li> Lunch
<ul>
<li class="expenses_s_kcal"> <b> 100 kcal </b></li>
<li class="expenses_s_fat"> <a> 10 g </a></li>
<li class="expenses_s_protein"> <c> 10 g </c></li>
<li class="expenses_s_carbs"> <d> 10 g </d></li>
</ul>
</li>
</ul>
<ul>
<li> Lunch
<ul>
<li class="expenses_s_kcal"> <b> 200 kcal </b></li>
<li class="expenses_s_fat"> <a> 20 g </a></li>
<li class="expenses_s_protein"> <c> 20 g </c></li>
<li class="expenses_s_carbs"> <d> 20 g </d></li>
</ul>
</li>
</ul>
<ul>
<li> Breakfast
<ul>
<li class="expenses_s_kcal"> <b> 300 kcal </b></li>
<li class="expenses_s_fat"> <a> 30 g </a></li>
<li class="expenses_s_protein"> <c> 30 g </c></li>
<li class="expenses_s_carbs"> <d> 30 g </d></li>
</ul>
</li>
</ul>
</div>
</div>