如何比较价值

当我单击成功添加的按钮时,如何在多次单击按钮时将值添加到先前的值。


$(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>


阿晨1998
浏览 119回答 3
3回答

四季花海

只需创建容器以从一开始就保存预期值,但用零填充它的价格和数字。然后,当单击按钮时,只需添加这些数字。编辑1:如果您有太多产品,只需使用“如果不存在”逻辑动态添加那些“零容器”编辑 2:建议使用 ID 表示每个产品。ID 可以是数据库主键、slug 或任何不包含空格或数字的内容。$( document ).ready(function() {&nbsp; &nbsp; //$('.container_product').css('display','none');&nbsp; &nbsp; $('.btn').click(function(){&nbsp; &nbsp; &nbsp; &nbsp; var btn = $(this);&nbsp; &nbsp; &nbsp; &nbsp; var count =&nbsp; btn.data("count");&nbsp; &nbsp; &nbsp; &nbsp; var identifier =&nbsp; btn.data("identifier");&nbsp; &nbsp; &nbsp; &nbsp; var name = btn.data("name");&nbsp; &nbsp; &nbsp; &nbsp; var price = btn.data("price")&nbsp; &nbsp; &nbsp; &nbsp; //console.log(name + price)&nbsp; &nbsp; &nbsp; &nbsp; //$('.display').append('<h2>'+ name + '</h2> ' + count + ' pc. price = ' + price)&nbsp; &nbsp; &nbsp; &nbsp; if($("#container_"+identifier).length == 0) { // if not exist&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".display").append(`&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span id="container_`+identifier+`" class="container_product">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>`+name+`</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span id="num_`+identifier+`">0</span> pc.&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; price = <span id="price_`+identifier+`">0</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $("#container_"+identifier).css('display','block');&nbsp; &nbsp; &nbsp; &nbsp; $("#price_"+identifier).html(&nbsp; parseInt($("#price_"+identifier).html())+price&nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; $("#num_"+identifier).html(&nbsp; parseInt($("#num_"+identifier).html())+1&nbsp; );&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; });});<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'>&nbsp; &nbsp; <p>Buterbrod</p>&nbsp; &nbsp; <p class="price">140</p></button><button data-name="hotdog" data-price="110" data-count="1" data-identifier="2" class="btn" type='submit'>&nbsp; &nbsp; <p>hotdog</p>&nbsp; &nbsp; <p class="price">110</p></button><button data-name="double buterbrod" data-price="9999" data-count="1" data-identifier="3" class="btn" type='submit'>&nbsp; &nbsp; <p>double buterbrod</p>&nbsp; &nbsp; <p class="price">9999</p></button><div class="display"></div>

有只小跳蛙

先在'display'元素中找到附加的元素,如果它的长度为0,则直接附加它,否则首先获取data-price属性的值并将更新后的价格添加到它。$(document).ready(function() {&nbsp; $('.btn').click(function() {&nbsp; &nbsp; var btn = $(this);&nbsp; &nbsp; var count = Number(btn.data("count"));&nbsp; &nbsp; var name = btn.data("name");&nbsp; &nbsp; var price = Number(btn.data("price"));&nbsp; &nbsp; var $h2 = $("<h2></h2>")&nbsp; &nbsp; &nbsp; .attr('data-name', name)&nbsp; &nbsp; &nbsp; .attr('data-count', count)&nbsp; &nbsp; &nbsp; .attr('data-price', price)&nbsp; &nbsp; &nbsp; .text(name + ' ' + count + ' pc. price = ' + price);&nbsp; &nbsp; var dataNameSelector = '*[data-name=' + name + ']';&nbsp; &nbsp; var childrenOrders = $('.display').find(dataNameSelector);&nbsp; &nbsp; if (childrenOrders.length === 0) {&nbsp; &nbsp; &nbsp; $('.display').append($h2);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; var updatedPrice = Number(childrenOrders.data('price')) + price;&nbsp; &nbsp; &nbsp; var updatedCount = Number(childrenOrders.data('count')) + count;&nbsp; &nbsp; &nbsp; childrenOrders.data('price', updatedPrice);&nbsp; &nbsp; &nbsp; childrenOrders.data('count', updatedCount);&nbsp; &nbsp; &nbsp; childrenOrders.text(name + ' ' + updatedCount + ' pc. price = ' + updatedPrice);&nbsp; &nbsp; }&nbsp; });});<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'>&nbsp; &nbsp; <p>Buterbrod</p>&nbsp; &nbsp; <p class="price">140</p></button><button data-name="hotdog" data-price="110" data-count="1" class="btn" type='submit'>&nbsp; &nbsp; <p>hotdog</p>&nbsp; &nbsp; <p class="price">110</p></button><div class="display"></div>

守候你守候我

可以使用您的代码轻松完成,append容器中的内容 a 给出 a class,下次只需检查该容器是否已经存在,然后insert进入html该容器。另外,您还需要不断更新count变量。$(document).ready(function() {&nbsp; $('.btn').click(function() {&nbsp; &nbsp; var btn = $(this);&nbsp; &nbsp; var data = btn.data();&nbsp; &nbsp; var count = data.count;&nbsp; &nbsp; var name = data.name;&nbsp; &nbsp; var price = data.price * count;&nbsp; &nbsp; data.count = count + 1;&nbsp; &nbsp; var html = '<h2>' + name + '</h2> ' + count + ' pc. price = ' + price;&nbsp; &nbsp; name = name.split(" ").join("_");&nbsp; &nbsp; if($('.display').find("."+name).length)&nbsp; &nbsp; &nbsp; $('.display').find("."+name).html(html);&nbsp; &nbsp; else&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; $('.display').append($("<div class='"+name+"'></div>").html(html));&nbsp; });});<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'>&nbsp; &nbsp; &nbsp; &nbsp; <p>Buterbrod</p>&nbsp; &nbsp; &nbsp; &nbsp; <p class="price">140</p>&nbsp; &nbsp; </button><button data-name="hotdog" data-price="110" data-count="1" class="btn" type='submit'>&nbsp; &nbsp; &nbsp; &nbsp; <p>hotdog</p>&nbsp; &nbsp; &nbsp; &nbsp; <p class="price">110</p>&nbsp; &nbsp; </button><div class="display"></div>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript