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

在total之外声明您的.each变量，不要使用追加，只需使用$('.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>");
            });
        });
    });
});

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

2 个答案:

UPDATED FIDDLE