javascript - 数据属性总和

Question

如何在 jquery 中获取 HTML5 数据属性的总和？例如，当检查一个和两个时，值需要为15，当没有检查值时，值等于0。

$('.price').html(parseInt($(this).attr('data-price')));

HTML:

<input class="checkbox" id="one" type="checkbox" checked data-link="111" data-price="10">one<br />
<input class="checkbox" id="two" type="checkbox" checked data-link="222" data-price="5">two<br />
<input class="checkbox" id="three" type="checkbox" checked data-link="333" data-price="2">three<br />
<a href="111,222,333">link</a>
<span class="price">17</span>

Java脚本:

$('.checkbox').on("change", function() {
    var links = [];//array for links
    $('.checkbox').filter(":checked").each(function() {
        links.push($(this).attr('data-link'));//get links

        //sum of all price values of this into price
        $('.price').html(parseInt($(this).attr('data-price')));
    });

    $("a").attr("href", links.join(",")); // change link
});

Fiddle

Answer 1

您需要修改代码，以便在循环的每次迭代之间保持运行总计。试试这个:

$('.checkbox').on("change", function () {
    var links = []; //array for links
    var totalPrice = 0;

    $('.checkbox:checked').each(function () {
        links.push($(this).data('link')); //get links
        totalPrice += $(this).data('price');
    });

    $('.price').html(totalPrice);
    $("a").attr("href", links.join(",")); // change link
});

Example fiddle

请注意，使用 data() 代替 attr('data-x') 也更快