Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Jquery - capítulo 5

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

por MAURICIO LASSAKOSKI
| 283.4k xp | 26 posts
Desenvolvedor de Software

Olá! Segui de acordo com os ensinamentos do Guilherme no vídeo, porem meu js parou de funcionar quando criei a função para varrer meus elementos da classe carrinho. Segue o js completo abaixo:

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);
            });

};
  var undo = function(){
        var carrinho = $(this).closest('.carrinho');

        carrinho.find("tr:visible").removeClass("recuperado");
                var trs = carrinho.find("tr:hidden");
        trs.addClass("recuperado");
                trs.show();
    };
var removeItem = function(event){
        event.preventDefault();

        var self = $(this); 
        self.closest('tr').hide(); 
        atualizaDados();
};
var carregaNoFinal = function(){
    $('.remove-item').click(removeItem);
    $('.undo').click(undo);
    atualizaDados();
};
$(carregaNoFinal);
4 respostas
por Alan Russo Da Costa Souza Bonachella
| 105.6k xp | 19 posts
Desenvolvedor

Como assim não carrega ? porque sua página está perfeita, o único erro que eu achei foi quando você volta no botão undo, você não atualiza os dados, ele não carrega desde a primeira vez que você entra na página ?

por MAURICIO LASSAKOSKI
| 283.4k xp | 26 posts
Desenvolvedor de Software

O html da página

<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>
                    <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 class="remove-item" href="">(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 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/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>
                <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="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>
    </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>
        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.0.3.min.js"></script>
    <script src="carrinho.js"></script>

</body>
</html>
solução!
por Alan Gomes
| 165.9k xp | 207 posts
Moderador Desenvolvedor Web Pleno

segue o meu codigo esta tudo ok 


var atualizaDados = function(){
    var carrinhos = $(".carrinho");
    carrinhos.each(function(){
        var carrinho = $(this);
        var total =0;
        var itens = carrinho.find(".item-total:visible");
        for(var i = 0 ; i < itens.length ; i++  ){
            var item = $(itens[i]);               
            var valor = parseFloat(item.text());
            total +=  valor;                 
        }
        carrinho.find(".valor-total").text(total);
        carrinho.find(".quantidade-itens").text(itens.length);
    });    
}
var undo = function (){
    var carrinho = $(this).closest(".carrinho");
    carrinho.find("tr:visible").removeClass("recuperado");
    carrinho.find("tr:hidden").addClass("recuperado").show();
    atualizaDados();
}

var removeItem = function(event){
    event.preventDefault();
    var self = $(this);
    self.closest("tr").hide();
    atualizaDados();

}
var aposinicializar =function(){    
    atualizaDados();
    $(".remove-item").click(removeItem);
    $(".undo").click(undo);
}
$(aposinicializar);
por MAURICIO LASSAKOSKI
| 283.4k xp | 26 posts
Desenvolvedor de Software

achei o erro, estava importando a versão errada do js. Obrigado a todos pela ajuda.