Jquery 如何使用数据属性获取已单击项目的总价？

我制作了一个脚本，它从数据属性中获取信息并在单击时显示。除了总价格函数外，一切都正常。我不能这样做

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

var informacija=$（“.informacija”）；
$（“.item”）。每个（函数（）{
var fotke=$（此）.data（“fotke”）；
var pavadinimas=$（this）.data（“pavadinimas”）；
var kaina=$（此）.data（“kaina”）；
$（this）。查找（“按钮”）。单击（函数（）{
$（'.noitems'）.hide（）；
$（'.totalitems'）.show（）；
附加信息（“+pavadinimas+”£“+kaina+”da”）；
var viso=$（“.perka”）.长度；
$（“.viso”）。追加（“+viso+”）；
//$（this.unbind（'click'）；
var合计=0；
总计+=帕塞因特（kaina）；
$（'totalprice'）。追加（总计）；
//…等等

我的问题：

目前我可以显示所有的东西，除了点击物品的总价格。我不知道怎么做

以下是完整的演示：

---

感谢您的帮助，并为糟糕的英语表示歉意。

在

之外声明您的
total
变量。每个
，不要使用append，只使用
$（'.totalprice'）。text（total）；

您应该将
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>");
            });
        });
    });
});

var informacija=$（“.informacija”）；
var合计=0；
$（“.item”）。每个（函数（）{
var fotke=$（此）.data（“fotke”）；
var pavadinimas=$（this）.data（“pavadinimas”）；
var kaina=$（此）.data（“kaina”）；
$（此）。查找（“按钮”）。单击（函数（）{
$（'.noitems'）.hide（）；
$（'.totalitems'）.show（）；
附加信息（“+pavadinimas+”£“+kaina+”da”）；
var viso=$（“.perka”）.长度；
$（“.viso”）。追加（“+viso+”）；
//$（this.unbind（'click'）；
总计+=帕塞因特（kaina）；
$（'.totalprice'）.html（总计）；
$（“.perka”）。每个（函数）{
$（this.find（“.nereik”）。单击（函数（）{
$（this.parent（）.remove（）；
var viso=$（“.perka”）.长度；
$（“.viso”）。追加（“+viso+”）；
});
});
});
});

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>");
            });
        });
    });
});