Solucionado (ver solução)
Solucionado
(ver solução)
12
respostas

Os links de esconder e mostrar propagandas tem ação muito rápida e não funcionam

Referente ao curso jQuery: Manipulação dinâmica de conteúdo

por JOSE ANGELO
| 34.9k xp | 51 posts

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>
12 respostas
por Rodrigo Jean dos Santos
| 293.1k xp | 23 posts

Jose, boa noite! Estava olhando seu código, senti falta da classificação da tag no Jquery.

Onde esta var tr = $("").addClass("propaganda").append($(""));

Troque por: var tr = $('

').addClass("propaganda").append($(''));
por JOSE ANGELO
| 34.9k xp | 51 posts

Entendi que sua sugestão foi trocar as aspas duplas pelas simples.

Ficou assim:

var tr = $('

').addClass("propaganda").append($(''));

Não funcionou. O comportamento ficou igual.

Aproveitando: como faço para apresentar a formatação de código ao postar uma dúvida? Ficou um lixo a postagem.

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Angelo para formatar o código basta inseri-lo dentro de três crases (`), mas ja formatei para você.

Sobre o problema, esta utilizando qual navegador ?

Tente mudar a função:

var alternarPropagandas = function(event) {
    event.preventDefault;
    $(".propaganda").fadeToggle();
    $(".alterna-propaganda").toggle();
};

Para:

var alternarPropagandas = function(event) {
    event.preventDefault;
    $(".propaganda").Toggle();
    $(".alterna-propaganda").toggle();
};

Só para testarmos.

por JOSE ANGELO
| 34.9k xp | 51 posts

Continua com o mesmo problema.

Usei: Chrome, Edge e Ópera. Todos com mesmo comportamento.

por Rodrigo Jean dos Santos
| 293.1k xp | 23 posts

Jose, deculpe! A linha tem que ficar assim

var tr = $('

').addClass("propaganda").append($(''));

Falsou a Tag.

por Rodrigo Jean dos Santos
| 293.1k xp | 23 posts

Estranho.... A tag não esta saindo no post.

A linha com a variavel TR

var tr = $("

").addClass("propaganda").append($(""));

Vamos ver se agora vai.

por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Deu certo a dica do Jose ?

por JOSE ANGELO
| 34.9k xp | 51 posts

Boa tarde,

não funcionou.

O que você fez foi tirar as aspas duplas e colocar aspas simples, quando comparado ao meu primeiro código.

O comportamento continua o mesmo.

Tentei alterar a versão do JQuery e também não deu certo. Mas ainda acho que seja a versão o problema. Teria que saber exatamente qual a versão foi utilizada na aula.

var tr = $('<tr>').addClass("propaganda").append($('<td>'));
por Matheus Henrique Castiglioni
| 5308.1k xp | 9007 posts
Instrutor

Jose se possível coloque seu projeto no github ou algum hospedador de arquivos para que eu possa estar analisando os códigos completos, assim ficará mais fácil identificar o problema.

Fico no aguardo

por JOSE ANGELO
| 34.9k xp | 51 posts

Está aqui:

https://www.dropbox.com/s/kt41epq4jiggod3/JQuery%20II.7z?dl=0

solução!
por Alan Gomes
| 165.9k xp | 207 posts
Moderador

você esque seu de colocar parentese no preventdefault

var alternarPropagandas = function(event) {
    event.preventDefault();
    $(".propaganda").fadeToggle();
    $(".alterna-propaganda").toggle();
};
por JOSE ANGELO
| 34.9k xp | 51 posts

Tinha certeza que era algo banal.

Obrigado.