如何使用数据属性获取点击商品的总价？

Question

我做了一个脚本，它从数据属性中获取信息并在点击时显示它。一切正常，除了总价函数。我做不到。

JS的一部分：

var informacija = $(".informacija");

$( ".item").each(function() {

   var fotke = $(this).data("fotke");
   var pavadinimas = $(this).data("pavadinimas");
   var kaina = $(this).data("kaina");

   $(this).find("button").click(function(){ 

     $('.noitems').hide();
     $('.totalitems').show();

     informacija.append("<div class='perka'><div class='fotke' style='...some styles... background-image: url("+ fotke + ");'></div><div class='tekstas'><h1>"+ pavadinimas +"</h1><h1>£<b class='price'>"+ kaina +"</b></h1></div><div class='nereik'>da</div></div>");

    var viso = $(".perka").length;
    $(".viso").append("<span>"+ viso +"</span>");
    // $(this).unbind('click');
    var total = 0;
    total += parseInt(kaina);
    $('.totalprice').append(total);

    // ... etc

我的问题：

目前我可以显示所有内容，但总点击商品价格除外。我不知道该怎么做。

这里是完整的演示：jsfiddle

感谢您的帮助，抱歉英语不好。

Answer 1

在 .each 之外声明您的 total 变量，不要使用追加，只需使用 $('.totalprice').text(total);

var total = 0;

$(".item").each(function() {
    ...
    $('.totalprice').text(total);

Fiddle

Answer 2

您应该将 total 声明为全局变量并使用 html() 而不是 append() 来设置总价。

var informacija = $(".informacija");
var total = 0;

$(".item").each(function () {

    var fotke = $(this).data("fotke");
    var pavadinimas = $(this).data("pavadinimas");
    var kaina = $(this).data("kaina");

    $(this).find("button").click(function () {
        $('.noitems').hide();
        $('.totalitems').show();
        informacija.append("<div class='perka'><div class='fotke' style='background-size:cover; background-repeat:no-repeat; background-position:50% 50%; background-image: url(" + fotke + ");'></div><div class='tekstas'><h1>" + pavadinimas + "</h1><h1>£<b class='price'>" + kaina + "</b></h1></div><div class='nereik'>da</div></div>");
        var viso = $(".perka").length;
        $(".viso").append("<span>" + viso + "</span>");
        // $(this).unbind('click');

        total += parseInt(kaina);

        $('.totalprice').html(total);

        $(".perka").each(function () {
            $(this).find(".nereik").click(function () {
                $(this).parent().remove();
                var viso = $(".perka").length;
                $(".viso").append("<span>" + viso + "</span>");
            });
        });
    });
});

如何使用数据属性获取点击商品的总价？

How to get total price of clicked items using data attribute?

html

math

jquery

custom-data-attribute

UPDATED FIDDLE