3 回答

TA貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超5個(gè)贊
只需創(chuàng)建容器以從一開(kāi)始就保存預(yù)期值,但用零填充它的價(jià)格和數(shù)字。然后,當(dāng)單擊按鈕時(shí),只需添加這些數(shù)字。
編輯1:如果您有太多產(chǎn)品,只需使用“如果不存在”邏輯動(dòng)態(tài)添加那些“零容器”
編輯 2:建議使用 ID 表示每個(gè)產(chǎn)品。ID 可以是數(shù)據(jù)庫(kù)主鍵、slug 或任何不包含空格或數(shù)字的內(nèi)容。
$( 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>

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超8個(gè)贊
先在'display'元素中找到附加的元素,如果它的長(zhǎng)度為0,則直接附加它,否則首先獲取data-price屬性的值并將更新后的價(jià)格添加到它。
$(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>

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超10個(gè)贊
可以使用您的代碼輕松完成,append容器中的內(nèi)容 a 給出 a class,下次只需檢查該容器是否已經(jīng)存在,然后insert進(jìn)入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>
添加回答
舉報(bào)