Solucionado
Olá, após realizar o último exercício do curso (criar os links para esconder as propagandas) percebi que ao escondê-las e depois clicar no botão "undo", elas aparecem novamente. Eu não consegui resolver sozinho, o que eu tentei fazer não deu certo, que foi colocar uma classe para as <tr> s da tabela e alterar a função "undo" para pegar as <tr> com a classe especifica, mas não deu certo. Então gostaria de uma sugestão de como arrumar esse problema.
Obrigado.
hoje, com a Alura e o Google Gemini
Não entendi direito seu problema Rodrigo, porque a função do botão undo, não seria fazer com que as propagandas voltassem a ser exibidas?
Poderia posta seu código?
Não, a função do botão "UNDO" é exibir novamente os produtos que foram excluídos do carrinho. No topo da página tem os botões para remover e adicionar as propagandas
Vou colocar o código do HTML e do JS.
<html>
<head>
<link rel="stylesheet" type="text/css" href="carrinho.css">
</head>
<body>
<h2>Geral</h2>
<a href="" id="esconde-propagandas" class="altera-propaganda">Esconder Propagandas</a>
<a href="" id="mostra-propagandas" class="altera-propaganda">Mostrar Propagandas</a>
<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>
<td></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 href="" class="remove-item">(Remover)</a></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 href="" class="remove-item">(Remover)</a></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 href="" class="remove-item">(Remover)</a></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 href="" class="remove-item">(Remover)</a></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 href="" class="remove-item">(Remover)</a></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 href="" class="remove-item">(Remover)</a></td>
</tr>
</tbody>
</table>
<div class="resumo">
Valor total: R$<span class="valor-total">0</span>
<br/>
Quantidade de itens distintos:
<span class="quantidade-de-itens"></span>
</div>
<div>
<input type="button" value="Undo" class="undo">
</div>
</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>
<input type="button" value="Undo" class="undo">
</div>
<div class="resumo">
Valor total: <span class="valor-total">0</span>
<br/>
Quantidade de itens: <span class="quantidade-de-itens">0</span>
</div>
</div>
<script src="jquery-2.2.3.min.js"></script>
<script src="carrinho.js"></script>
</body>
</html>var umaPropaganda = function(){
var propagandas = ["O que acha de comprar uma motocicleta?",
"O que acha de comprar uma lancha?",
"O que acha de comprar uma bicicleta?",
"O que acha de comprar uma carro?"
];
var posicao = Math.floor(propagandas.length * Math.random());
var texto = propagandas[posicao];
var tr = $("<tr>").addClass("propaganda").append($("<td>"));
tr.find("td").attr("colspan", 6).text(texto);
return tr;
};
var atualizaDados = function(){
var carrinhos = $(".carrinho");
carrinhos.each(function(){
var carrinho = $(this);
var itens = carrinho.find(".item-total:visible");
var total = 0;
$.each(itens, function(){
var valor = parseFloat($(this).text());
total += valor;
});
carrinho.find(".valor-total").text(total);
carrinho.find(".quantidade-de-itens").text(itens.length);
});
}
var removeItem = function(event){
event.preventDefault();
var self = $(this);
self.closest("tr").hide();
var atual = parseInt($("#quantidade-de-itens").text());
$(".quantidade-de-itens").text(atual-1);
atualizaDados();
};
var undo = function(){
var carrinho = $(this).closest(".carrinho");
carrinho.find("tr:visible").removeClass("recuperado");
carrinho.find("tr:hidden").addClass("recuperado").show();
atualizaDados();
}
var daDestaque = function(){
$(this).addClass("hovering");
$(this).find(".remove-item").fadeIn();
};
var tiraDestaque = function(){
$(this).removeClass("hovering");
$(this).find(".remove-item").fadeOut();
};
var alteraPropagandas = function(event){
event.preventDefault();
$(".propaganda").fadeToggle();
$(".altera-propaganda").toggle();
};
var aposInicializado = function(){
$(".remove-item").click(removeItem);
$(".undo").click(undo);
atualizaDados();
$(".carrinho").each(function(){
var carrinho = $(this);
carrinho.find("tr:nth-child(3n), tr:last").each(function(){
umaPropaganda().insertAfter($(this));
});
});
$("tbody tr").hover(daDestaque, tiraDestaque);
$(".altera-propaganda").click(alteraPropagandas);
}
$(aposInicializado);O que você pode fazer é colocar uma classe nas <tr> dos produtos e mudar o seletor da função undo.
Html:
<tr class="produto">
<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 href="" class="remove-item">(Remover)</a></td>
</tr>Javascript:
var undo = function(){
var carrinho = $(this).closest(".carrinho");
carrinho.find(".produto:visible").removeClass("recuperado");
carrinho.find(".produto:hidden").addClass("recuperado").show();
atualizaDados();
}Espero ter ajudado, bons estudos!
Deu certo Phelipe, porém eu tinha feito isso, mas pelo jeito fiz alguma cagada, obrigado! :)