Dúvida no Ex. 4 da Aula 1 - Selecionando e manipulando elementos | jQuery: Manipulação dinâmica de conteúdo

8
respostas

Referente ao curso jQuery: Manipulação dinâmica de conteúdo , no capítulo Selecionando e manipulando elementos e atividade Calculando a quantidade de itens

por FABIANO DOS SANTOS DA SILVA

| 67.5k xp | 1 posts

PROGRAMADOR

var total = 0; var itens = 0; for(var i=0; i < itens.length; i++) { var textoConteudo = $(itens[i]).text(); var preco = parseFloat(textoConteudo); total += preco; var textoQuantidade = $(quantidade[i]).text(); var quantidade = parseFloat(textoQuantidade); itens += quantidade; } $("#valor-total").text(total); $("#quantidade-de-itens").text(quantidade);

Pelo que entendi a variável itens foi declarada errada ele deveria receber o array de valores total var items = $(".item-total"); Já a variável quantidade não foi declarada recebendo o valor de array ou seja vai dar erro.

8 respostas

por Rodrigo Banci de Lima

| 518k xp | 34 posts

Engenheiro de Software

15/05/2016

Olá amigo realmente tem um erro nesse código, é melhor se basear pelo vídeo que o código apresentado esta correto.

<script>
        var items = $(".item-total");
        var total = 0;
        for (var i = 0; i < items.length; i++){
            var item = $(items[i]).text();
            var preco = parseFloat(item);
            total += preco;
        }
        $("#valor-total").text(total);
        $("#quantidade-itens").text(items.length);
    </script>

A variável quantidade foi criada dentro do for então ela não existe fora dele, espero ter ajudado.

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

16/05/2016

Fabiano com a resposta do Rodrigo você conseguiu resolver seu problema ?

por Elieden Estevam Garcia Barbosa

| 98.7k xp | 13 posts

13/08/2016

Matheus Castiglioni , eu acabei de fazer uma correção, porque o código pega o valor de items.length e não o conteúdo da tag td que representa a quantidade do item. Minha correção foi essa:

<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 class="quantidade-itens">1</td>
                    <td>499.99</td>
                    <td class="item-total">499.99</td>
                </tr>
                <tr>
                    <td><img src="imagens/telefone.png"></td>
                    <td>Telefone miPhone 18</td>
                    <td class="quantidade-itens">2</td>
                    <td>199.99</td>
                    <td class="item-total">399.98</td>
                </tr>
                <tr>
                    <td><img src="imagens/sapato.jpg"></td>
                    <td>Sapato</td>
                    <td class="quantidade-itens">1</td>
                    <td>99.99</td>
                    <td class="item-total">99.99</td>
                </tr>
                <tr>
                    <td><img src="imagens/monitor.jpg"></td>
                    <td>Monitor Sam 21</td>
                    <td class="quantidade-itens">1</td>
                    <td>299.00</td>
                    <td class="item-total">299.00</td>
                </tr>
                <tr>
                    <td><img src="imagens/teclado.jpg"></td>
                    <td>Teclado com fio preto </td>
                    <td class="quantidade-itens">1</td>
                    <td>100.00</td>
                    <td class="item-total">100.00</td>
                </tr>
                <tr>
                    <td><img src="imagens/mouse.jpg"></td>
                    <td>Mouse wireless</td>
                    <td class="quantidade-itens">1</td>
                    <td>199.00</td>
                    <td class="item-total">199.00</td>
                </tr>
                <tr>
                    <td><img src="imagens/camiseta.jpg"></td>
                    <td>Camiseta G</td>
                    <td class="quantidade-itens">1</td>
                    <td>25.00</td>
                    <td class="item-total">25.00</td>
                </tr>
            </tbody>
        </table>
        <div>
            Valor total: R$<span id="valor-total">0</span>
            <br/>
            Quantidade de itens distintos: <span id="quantidade-de-itens"></span>
        </div>
        <script src="js/jquery-3.1.0.min.js"></script>
        <script>
            var total = 0;
            var quantidade = 0;
            var itens = $(".item-total");
            var itensQuantidade = $(".quantidade-itens");
            for(var i=0; i < itens.length; i++) {
                var textoConteudo = $(itens[i]).text();
                var preco = parseFloat(textoConteudo);
                total += preco;
                quantidade += parseFloat($(itensQuantidade[i]).text());

            }
            $("#valor-total").text(total);
            $("#quantidade-de-itens").text(quantidade);
        </script>
    </div>
</body>
</html>

Obs: meu arquivo jQuery fica na pasta js e estou usando jquery-3.1.0.min.js atualmente.

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

15/08/2016

Esta funcionando seu código então Elieden ?

por Elieden Estevam Garcia Barbosa

| 98.7k xp | 13 posts

16/08/2016

Sim meu código funciona e já tentei sugerir uma correção. No video e nos exemplos o total da quantidade de item está errado. Isso porque o código não pega o conteúdo do td que representa quantidade.

Obs: Meu código não faz sentido pegar parseFloat porque a quantidade sempre vai ser inteira. Pequeno erro xD.

por Elieden Estevam Garcia Barbosa

| 98.7k xp | 13 posts

16/08/2016

Matheus Castiglioni, outra coisa que acabei percebendo só agora. No exercício "Calculando a quantidade de itens " virá quantidade de itens distintos. Mas na video-aula está quantidade de itens.

Então desculpe pela falta de atenção mas é que ficou confuso.

Meu código funciona para pegar a quantidade de itens. Veja qual foi a resposta no exercicio:

<script>
    var total = 0;
    var itens = 0;
    for(var i=0; i < itens.length; i++) {
        var textoConteudo = $(itens[i]).text();
        var preco = parseFloat(textoConteudo);
        total += preco;
        var textoQuantidade = $(quantidade[i]).text();
        var quantidade = parseFloat(textoQuantidade);
        itens += quantidade;
    }
    $("#valor-total").text(total);
    $("#quantidade-de-itens").text(quantidade);
</script>

por Matheus Henrique Castiglioni

| 5303.5k xp | 9004 posts

Instrutor Senior Software Engineer

23/08/2016

Elieden esse código é a reposta do exercício ?

Poste o seu para eu ver a diferença, peço que se estiver errado você sugira uma correção no exercício, como fiz o curso a muito tempo não lembro dos detalhes.

Obs: Desculpe a demora da resposta pois esta um pouco corrido as coisas por aqui.

por RENAN DUARTE

| 247.7k xp | 118 posts

MESTRE

05/10/2016

nao entendi pq textoQuantidade recebe quantidade[i].text e logo em seguida é declarada a variavel quantidade novamente :/