如何比较价值

Question

当我单击成功添加的按钮时，如何在多次单击按钮时将值添加到先前的值。$(document).ready(function() {  $('.btn').click(function() {    var btn = $(this);    var count = btn.data("count");    var name = btn.data("name");    var price = btn.data("price")    console.log(name + price)    $('.display').append('<h2>' + name + '</h2> ' + count + ' pc. price = ' + price)  });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button data-name="Buterbrod" data-price="140" data-count="1" class="btn" type='submit'>        <p>Buterbrod</p>        <p class="price">140</p>    </button><button data-name="hotdog" data-price="110" data-count="1" class="btn" type='submit'>        <p>hotdog</p>        <p class="price">110</p>    </button><div class="display"></div>

Answer 1

只需创建容器以从一开始就保存预期值，但用零填充它的价格和数字。然后，当单击按钮时，只需添加这些数字。

编辑1：如果您有太多产品，只需使用“如果不存在”逻辑动态添加那些“零容器”

编辑 2：建议使用 ID 表示每个产品。ID 可以是数据库主键、slug 或任何不包含空格或数字的内容。

$( document ).ready(function() {

    //$('.container_product').css('display','none');

    $('.btn').click(function(){

        var btn = $(this);

        var count =  btn.data("count");

        var identifier =  btn.data("identifier");

        var name = btn.data("name");

        var price = btn.data("price")

        //console.log(name + price)

        //$('.display').append('<h2>'+ name + '</h2> ' + count + ' pc. price = ' + price)

        if($("#container_"+identifier).length == 0) { // if not exist

            $(".display").append(`

                <span id="container_`+identifier+`" class="container_product">

                    <h2>`+name+`</h2>

                    <span id="num_`+identifier+`">0</span> pc. 

                    price = <span id="price_`+identifier+`">0</span>

                </span>

            `)

        }

        

        $("#container_"+identifier).css('display','block');

        $("#price_"+identifier).html(  parseInt($("#price_"+identifier).html())+price  );

        $("#num_"+identifier).html(  parseInt($("#num_"+identifier).html())+1  );

        

    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button data-name="buterbrod" data-price="140" data-count="1" data-identifier="1" class="btn" type='submit'>

    <p>Buterbrod</p>

    <p class="price">140</p>

</button>

<button data-name="hotdog" data-price="110" data-count="1" data-identifier="2" class="btn" type='submit'>

    <p>hotdog</p>

    <p class="price">110</p>

</button>

<button data-name="double buterbrod" data-price="9999" data-count="1" data-identifier="3" class="btn" type='submit'>

    <p>double buterbrod</p>

    <p class="price">9999</p>

</button>

<div class="display">

</div>

Answer 2

先在'display'元素中找到附加的元素，如果它的长度为0，则直接附加它，否则首先获取data-price属性的值并将更新后的价格添加到它。

$(document).ready(function() {

  $('.btn').click(function() {

    var btn = $(this);

    var count = Number(btn.data("count"));

    var name = btn.data("name");

    var price = Number(btn.data("price"));

    var $h2 = $("<h2></h2>")

      .attr('data-name', name)

      .attr('data-count', count)

      .attr('data-price', price)

      .text(name + ' ' + count + ' pc. price = ' + price);

    var dataNameSelector = '*[data-name=' + name + ']';

    var childrenOrders = $('.display').find(dataNameSelector);

    if (childrenOrders.length === 0) {

      $('.display').append($h2);

    } else {

      var updatedPrice = Number(childrenOrders.data('price')) + price;

      var updatedCount = Number(childrenOrders.data('count')) + count;

      childrenOrders.data('price', updatedPrice);

      childrenOrders.data('count', updatedCount);

      childrenOrders.text(name + ' ' + updatedCount + ' pc. price = ' + updatedPrice);

    }

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button data-name="Buterbrod" data-price="140" data-count="1" class="btn" type='submit'>

    <p>Buterbrod</p>

    <p class="price">140</p>

</button>

<button data-name="hotdog" data-price="110" data-count="1" class="btn" type='submit'>

    <p>hotdog</p>

    <p class="price">110</p>

</button>

<div class="display"></div>

Answer 3

可以使用您的代码轻松完成，append容器中的内容 a 给出 a class，下次只需检查该容器是否已经存在，然后insert进入html该容器。另外，您还需要不断更新count变量。

$(document).ready(function() {

  $('.btn').click(function() {

    var btn = $(this);

    var data = btn.data();

    var count = data.count;

    var name = data.name;

    var price = data.price * count;

    data.count = count + 1;

    var html = '<h2>' + name + '</h2> ' + count + ' pc. price = ' + price;

    name = name.split(" ").join("_");

    if($('.display').find("."+name).length)

      $('.display').find("."+name).html(html);

    else    

      $('.display').append($("<div class='"+name+"'></div>").html(html));

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button data-name="Buterbrod" data-price="140" data-count="1" class="btn" type='submit'>

        <p>Buterbrod</p>

        <p class="price">140</p>

    </button>

<button data-name="hotdog" data-price="110" data-count="1" class="btn" type='submit'>

        <p>hotdog</p>

        <p class="price">110</p>

    </button>

<div class="display"></div>