Oi pessoal, Então, mesmo mudando pra classe e usando carrinhos.each, a tabela de vitoria fica com os valores de preço e numero de produtos igual a zero. Já revirei o codigo e não acho aonde está errado. :/
var atualizaDados = function(){
var carrinhos = $(".carrinho");
carrinhos.each(function(){
var carrinho = $(this);
var items = carrinho.find(".item-total:visible");
var total = 0;
for(var i=0; i < items.length; i++) {
var conteudo = $(items[i]).text();
var preco = parseFloat(conteudo);
total += preco;
}
carrinho.find(".valor-total").text(total);
carrinho.find(".quantidade-de-itens").text(items.length);
});
};
atualizaDados();
var removeItem = function(event){
event.preventDefault();
$(this).closest("tr").hide();
var atual = parseInt($(".quantidade-de-itens").text());
var novaQuantidade = atual - 1;
$(".quantidade-de-itens").text(novaQuantidade);
var precoAtual = parseFloat($('.valor-total').text());
var preco = parseFloat($(this).closest("tr").find(".item-total").text());
var precoFinal = precoAtual - preco;
$('.valor-total').text(precoFinal);
};
$('.remove-item').click(removeItem);
var undo = function(){
var trs = $("tr:hidden");
$("tr:visible").removeClass("recuperado");
trs.addClass("recuperado");
trs.show();
atualizaDados()
};
$(".undo").click(undo);<html>
<head>
<link rel="stylesheet" type="text/css" href="carrinho.css">
</head>
<body>
<div class="carrinho">
<h2>Carrinho entrega em Sao Paulo</h2>
<table>
<thead>
<tr>
<td></td>
<td>Nome</td>
<td>Quantidade</td>
<td>Valor</td>
<td>Total</td>
</tr>
</thead>
<tbody>
<tr>
<td><img src="imagens/tablet.jpg"></td>
<td>Tablet miPad 18</td>
<td>1</td>
<td>499.99</td>
<td class="item-total">499.99</td>
<td><a class="remove-item" href="">(Remover)</td>
</tr>
<tr>
<td><img src="imagens/telefone.png"></td>
<td>Telefone miPhone 18</td>
<td>2</td>
<td>199.99</td>
<td class="item-total">399.98</td>
<td><a class="remove-item" href="">(Remover)</td>
</tr>
<tr>
<td><img src="imagens/sapato.jpg"></td>
<td>Sapato</td>
<td>1</td>
<td>99.99</td>
<td class="item-total">99.99</td>
<td><a class="remove-item" href="">(Remover)</td>
</tr>
<tr>
<td><img src="imagens/monitor.jpg"></td>
<td>Monitor Sam 21</td>
<td>1</td>
<td>299.00</td>
<td class="item-total">299.00</td>
<td><a class="remove-item" href="">(Remover)</td>
</tr>
<tr>
<td><img src="imagens/teclado.jpg"></td>
<td>Teclado com fio preto </td>
<td>1</td>
<td>100.00</td>
<td class="item-total">100.00</td>
<td><a class="remove-item" href="">(Remover)</td>
</tr>
<tr>
<td><img src="imagens/mouse.jpg"></td>
<td>Mouse wireless</td>
<td>1</td>
<td>199.00</td>
<td class="item-total">199.00</td>
<td><a class="remove-item" href="">(Remover)</td>
</tr>
<tr>
<td><img src="imagens/camiseta.jpg"></td>
<td>Camiseta G</td>
<td>1</td>
<td>25.00</td>
<td class="item-total">25.00</td>
<td><a class="remove-item" href="">(Remover)</td>
</tr>
</tbody>
</table>
<div>
Valor total do carrinho:
<span class="valor-total"></span>
<br/>
Quantidade de itens distintos:
<span class="quantidade-de-itens"></span>
</div>
</div>
<div>
<input type="button" value="Undo" class="undo">
</div>
<div class="carrinho">
<h2>Carrinho entrega em Vitoria</h2>
<table>
<thead>
<tr>
<td></td>
<td>Nome</td>
<td>Quantidade</td>
<td>Valor</td>
<td>Total</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td><img src="imagens/camiseta.jpg"></td>
<td>Camiseta G</td>
<td>1</td>
<td>25.00</td>
<td class="item-total">25.00</td>
<td><a class="remove-item" href="">(remover)</a></td>
</tr>
</tbody>
</table>
</div>
<div>
<input type="button" value="Undo" class="undo">
</div>
<div>
Valor total: <span class="valor-total">0</span>
<br/>
Quantidade de itens: <span class="quantidade-de-itens">0</span>
</div>
<script src="jquery-2.0.3.min.js"></script>
<script src="carrinho.js"></script>
</body>
</html>