Boa noite,
peço-lhes ajuda.
O erro é: quando clico no link esconder propaganda, a ação acontece mas, logo em seguida, ela é desfeita. Não entendi o motivo de ela ser desfeita.
Seguem os códigos do CSS, JS e HTML.
* {
font-size: 1em;
margin: 0;
padding: 0;
}
body {
font-family: Arial;
line-height: 1.4;
margin: 2em;
}
h2 {
color: #444;
font-size: 2em;
margin: 1em 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
background: #f5f5f5;
border: 1.5em solid #f5f5f5;
width: 100%;
}
thead {
font-weight: bold;
}
th {
padding: 0.75em;
border-bottom: 2px solid #ddd;
text-align: left;
}
td {
padding: 0.75em;
border-bottom: 1px solid #ddd;
}
.propaganda td {
background: #9F0;
padding: 1em 0.5em;
text-align: center;
color: #333;
font-style: italic;
}
.remove-item {
background: #F30;
border-radius: 2px;
color: white;
font-size: 0.7em;
text-decoration: none;
text-transform: uppercase;
display: none;
padding: 0.5em;
}
.hovering {
background: #CCC
}
input[type=button] {
background: #F90;
border: none;
color: #333;
text-transform: uppercase;
box-shadow: 0 1px 3px #777;
display: block;
padding: 0.5em 1em;
margin: 1em 0;
-webkit-appearance: none;
}
#mostrar {
display : none;
}
.resumo {
background: #555;
color: white;
padding: 1.5em;
line-height: 2;
margin: 2em 0;
}
.recuperado {
background: #FE0;
}
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 um 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;
for (i = 0; i < itens.length; i++) {
var item = $(itens[i]);
var valor = parseFloat(item.text());
total = total + valor;
};
carrinho.find(".valor-total").text(total);
carrinho.find(".quantidade-itens").text(itens.length);
});
};
var removeItem = function(event) {
event.preventDefault();
var self = $(this);
self.closest("tr").hide();
atualizaDados();
};
var desfazerExclusao = function() {
var carrinho = $(this).closest(".carrinho");
carrinho.find("tr:visible").removeClass("recuperado");
var trs = carrinho.find("tr:hidden");
trs.addClass("recuperado").show();
atualizaDados();
};
var daDestaque = function(){
$(this).find(".remove-item").fadeIn();
$(this).addClass("hovering");
};
var tiraDestaque = function(){
$(this).find(".remove-item").fadeOut();
$(this).removeClass("hovering");
};
var alternarPropagandas = function(event) {
event.preventDefault;
$(".propaganda").fadeToggle();
$(".alterna-propaganda").toggle();
};
var aposInicializado = function() {
atualizaDados();
$(".undo").click(desfazerExclusao);
$(".remove-item").click(removeItem);
$(".carrinho").each(function(){
$(this).find("tr:nth-child(3n), tr:last").each(function(){
umaPropaganda().insertAfter($(this));
});
});
$("tbody tr").hover(daDestaque, tiraDestaque);
$(".alterna-propaganda").click(alternarPropagandas);
};
$(aposInicializado);
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="carrinho.css">
</head>
<body>
<h2>Geral</h2>
<a href="" class="alterna-propaganda">Esconder propagandas</a>
<a href="" id="mostrar" class="alterna-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>Ações</td>
</tr>
</thead>
<tbody>
<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</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 class="remove-item" href="">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 class="remove-item" href="">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 class="remove-item" href="">Remover</a></td>
</tr>
</tbody>
</table>
<div>
<input type="button" value="Desfazer remover" class="undo">
</div>
<div class="resumo">
Quantidade de itens: <span class="quantidade-itens">0</span>
<br/>
Valor total: R$<span class="valor-total">0</span>
</div>
</div>
<div class="carrinho">
<h2>Carrinho entrega em Vitória</h2>
<table>
<thead>
<tr>
<td></td>
<td>Nome</td>
<td>Quantidade</td>
<td>Valor</td>
<td>Total</td>
<td>Ações</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="Desfazer remover" class="undo">
</div>
<div class="resumo">
Quantidade de itens: <span class="quantidade-itens">0</span>
<br/>
Valor total: R$<span class="valor-total">0</span>
</div>
</div>
<div class="carrinho">
<h2>Carrinho entrega em Brasília</h2>
<table>
<thead>
<tr>
<td></td>
<td>Nome</td>
<td>Quantidade</td>
<td>Valor</td>
<td>Total</td>
<td>Ações</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</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 class="remove-item" href="">Remover</a></td>
</tr>
</tbody>
</table>
<div>
<input type="button" value="Desfazer remover" class="undo">
</div>
<div class="resumo">
Quantidade de itens: <span class="quantidade-itens">0</span>
<br/>
Valor total: R$<span class="valor-total">0</span>
</div>
</div>
<script src="jquery-2.2.2.min.js"></script>
<script src="totalizando.js"></script>
</body>
</html>
