Question

我正在努力提高我的jQuery技能，并希望在购物车中添加值，但有一些困难。我想从每个项目中添加价格并将它们加载到总p类中。其他所有东西似乎都运行得很好，但是我无法获得跨度值并将其添加到一起。

<ul class="items">
<li><a data-item="macbook">Macbook - £<span>1000</span></a></li>
<li><a data-item="ipad">Ipad - £<span>400</span></a></li>
<li><a data-item="iphone">Iphone- £<span>200</span></a></li>
<li><a data-item="macbook-air">Macbook air £<span>1200</span></a></li>
<li><a data-item="mouse">mouse £<span>50</span></a></li>
</ul>

<table>
<thead>
<tr>
<th class="item">Item</th>
<th class="price">Price</th>
<th class="quantity">Quantity</th>
<th class="remove">Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item"></td>
<td class="price"></td>
</tr>
</tbody>
</table>
<ul class="cartItems">
</ul>
<button class="clear-cart">
clear cart
</button>
<section class="cart">
<h2>TOTAL</h2>
<p class="total">£0</p>
</section>

var $total = $('.total');
var $items = $('.items li a');
var $cartItems = $('.cartItems');

var basket = {};
//Add items to cart
$items.on('click', function() {
var product = $(this).data("item"); 
if(!(product in basket)) {
basket[product] = 0;
}
basket[product]++;
render();   
});

//Append items to cart
function render() {
$("table tbody").html("");
for(var product in basket) {
var $item = $("a[data-item="+product+"]");
var price = parseFloat($item.find("span").text(), 10);

var $row = $('<tr></tr>')

var $price = $("<td></td>").addClass("price").text(price);
var $name = $("<td></td>").addClass("name").text(product);
var $quantity = $("<td></td>").addClass("quantity").text(basket[product]);
var $remove = $('<td></td>').addClass("remove").html('<a>x</x>');



$row.append($name).append($price).append($quantity).append($remove);
$("table tbody").append($row);

Answer 1

遍历li中的.items元素，并选择锚元素中的span元素。使用parseInt(text, 10)解析文本，并将金额添加到总数中。

Example Here

var total = 0;
$('.items li').each(function () {
    var text = $('a span', this).text();
    total += parseInt(text, 10);
});
$('.total').text('£' + total);

在这种情况下，输出将是：

<p class="total">£2850</p>

在span标记中添加值

1 个答案: