gpt4 book ai didi

javascript - 使用 jQuery 将使用复选框的数据属性从 false 更改为 true

转载 作者:行者123 更新时间:2023-11-30 16:28:14 25 4
gpt4 key购买 nike

我已经在表格中创建了项目列表。我想计算选中项目的价格,但不知道如何在选中/取消选中复选框时更新数据属性。我包含了用于生成列表和更新价格计算的代码。

$.each(shopList, function (i, elem) {
var item = elem.item;
var link = elem.link;
var user = elem.user;
var price = elem.price;
var priority = elem.priority;

$(".listItems").append(
'<tr class="items" data-priority="' + priority + '">' +
'<td><input type="checkbox" class="priority"' + ((priority) ? 'checked' : '') + ' /></td>' +
'<td>' + '<a href="' + link + '" target="_blank">' + item + '</a>' + '</td>' +
'<td>' + user + '</td>' +


'<td class="price">' + price + '</td>' +
'<td><button class="btn btn-default deleteItem">Del </button></td>' +
'</tr>'
);
});

以及更新价格的代码:

function updatePriority(){
sumPriority = 0;
$('tr.items[data-priority=true] .price').each(function () {

var total = $(this).text();
if (!isNaN(total) || total.length != 0) {
sumPriority += parseFloat(total);
};
});
$('.totalPriority').html(sumPriority.toFixed(2));
};

当页面呈现时,它有选中和未选中的项目,一开始一切都是这样,但在进行更改时就不是这样了。如何更新 DOM 中的数据属性 true/false?

最佳答案

不使用数据属性,只使用 Checkbox :checked status

您可以循环遍历选中的复选框,而不是遍历 [data-priority=true] 复选框,并使用 parent().find('.price') 找到正确的价格标签。

function updatePriority(){
sumPriority = 0;
$('.priority:checked').each(function () {
var priceElement = $(this).parent().parent().find('.price');

var total = priceElement.text();
if (!isNaN(total) || total.length != 0) {
sumPriority += parseFloat(total);
};
});
$('.totalPriority').html(sumPriority.toFixed(2));
};

How can I update the data-property true/false in the DOM?

如果您真的想保持代码不变,并且只在更改checkbox 时更新data-priority 属性,您可以实现change 复选框上的监听器并更改 parents 属性:

$('tr.items .price').change(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().attr("data-priority",true);
}else{
$(this).parent().parent().attr("data-priority",false);
}
});

关于javascript - 使用 jQuery 将使用复选框的数据属性从 false 更改为 true,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33779066/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com