1

Estou utilizando um plugin que quando clica no botão de + ele multiplica o valor.

Ele funciona perfeitamente mas o calculo só é feito dentro do <span id="price" class="amount"></span> e traz o Total dentro do <span id="total" class="total_amount"></span>

Quando tento colocar essa interação dentro do Input ele não funciona.

function calculate(obj){
                var price = parseFloat($(obj).parent().parent().parent().find('.amount').text()) || 0;
                var quantity = parseInt($(obj).parent().find('.qty').val());
                var total = price * quantity;
               
               $(obj).parent().parent().parent().find('.total_amount').text(total);
            }
    
            function changeQuantity(num,obj){
         
                $(obj).parent().find('.qty').val( parseInt($(obj).parent().find('.qty').val())+num);
            }
    
            $().ready(function(){
                //calculate();
                $(".minus").click(function(){
                    changeQuantity(-1,this);
                    calculate(this);
                });
                $(".plus").click(function(){
                    changeQuantity(1,this);
                    calculate(this);
                });
    
               
    			$(".qty").keyup(function(e){
    				if (e.keyCode == 38)   changeQuantity(1,this);
                    if (e.keyCode == 40) changeQuantity(-1,this);
                    calculate(this);
                });
    
    
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table cart">
  <thead>
     <tr>
       <th class="cart-product-thumbnail">&nbsp;</th>
       <th class="cart-product-name">Produto</th>
       <th class="cart-product-quantity">Quantidade</th>
       <th class="cart-product-price">Precço Unitario</th>
       <th class="cart-product-subtotal">Total</th>
     </tr>
   </thead>
   <tbody>
     <tr class="cart_item">
       <td class="cart-product-thumbnail"></td>
       <td class="cart-product-name">
         <a href="#">Pera</a>
       </td>
       <td class="cart-product-quantity">
          <div class="quantity clearfix">
             <input type="button" value="-" class="minus" field="quantity">
              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
               <input type="button" value="+" class="plus" field="quantity">
           </div>
        </td>
        <td class="cart-product-price">
          R$ <span id="price" class="amount">50000</span>
        </td>
        <td class="cart-product-subtotal">
           <span id="total" class="total_amount"></span>
        </td>
        </tr>
           <tr class="cart_item">
              <td class="cart-product-thumbnail"></td>
              <td class="cart-product-name">
                 <a href="#">Uva</a>
              </td>
              <td class="cart-product-quantity">
                 <div class="quantity clearfix">
                     <input type="button" value="-" class="minus" field="quantity">
                     <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                      <input type="button" value="+" class="plus" field="quantity">
                  </div>
               </td>
               <td class="cart-product-price">
                   R$ <span id="price" class="amount">40000</span>
                </td>
      
                <td class="cart-product-subtotal">
                   <span id="total" class="total_amount"></span>
                 </td>
             </tr>
              <tr class="cart_item">
                 <td class="cart-product-thumbnail"></td>
      
                <td class="cart-product-name">
                  <a href="#">Teste 3</a>
                </td>
      
       
      
                      <td class="cart-product-quantity">
                          <div class="quantity clearfix">
                              <input type="button" value="-" class="minus" field="quantity">
                              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                              <input type="button" value="+" class="plus" field="quantity">
                          </div>
                      </td>
                      <td class="cart-product-price">
                          R$ <span id="price" class="amount">35000</span>
                      </td>
      
                      <td class="cart-product-subtotal">
                          <span id="total" class="total_amount"></span>
                      </td>
      
                      
                  </tr>
                  
      
                               <tr class="cart_item">
      
      
                      <td class="cart-product-thumbnail">
      
                      </td>
      
                      <td class="cart-product-name">
                          <a href="#">Teste 4</a>
                      </td>
      
       
      
                      <td class="cart-product-quantity">
                          <div class="quantity clearfix">
                              <input type="button" value="-" class="minus" field="quantity">
                              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                              <input type="button" value="+" class="plus" field="quantity">
                          </div>
                      </td>
                      <td class="cart-product-price">
                          R$ <span id="price" class="amount">35600</span>
                      </td>
      
                      <td class="cart-product-subtotal">
                          <span id="total" class="total_amount"></span>
                      </td>
      
                      
                  </tr>
           </tbody>
      </table>

6
  • Como assim? Qual input? Tem como você colocar a estrutura que você quer no JSFiddle, e mostrar onde tu quer que a interação funcione? Commented 17/01/2017 às 12:32
  • @JuniorNunes eu criei mais um Campo Input só pra mostrar como gostaria a interação Commented 17/01/2017 às 12:43
  • jsfiddle.net/felipefranco/fo5bzfpc/1 Commented 17/01/2017 às 12:47
  • você quer que, ao mudar o valor do input de quantidade atualize o valor total? Commented 17/01/2017 às 12:57
  • Isso mesmo gostaria que alterasse o valor do total mas nao estou conseguindo fazer isso Commented 17/01/2017 às 13:00

2 Respostas 2

4

Quando você lê os dados no interior de um <span></span>, você acessa o texto que está no interior das tags através do método .text(). Mas para ler os dados que estão em um <input></input>, você deve ler o seu valor, com o método .val().

Assim, se você substituir estas linhas no método calculate:

var price = parseFloat($(obj).parent().parent().parent().find('.amount').text()) || 0;
/* ... */
$(obj).parent().parent().parent().find('.total_amount').text(total);

por estas:

var price = parseFloat($(obj).closest('.cart_item').find('.amount').val()) || 0;
/* ... */    
$(obj).closest('.cart_item').find('.total_amount').val(total);

irá ter o mesmo comportamento dos spans.

Além disto, alterei sua cadeia de parent() para o método closest(), que localiza o parent mais "próximo" com aquele selector fornecido.

Fiddle aqui: https://jsfiddle.net/mrlew/qvaf5bkj/1/

Por fim, a título de sugestão, você tem diversos id's de elementos repetidos (quantity, price, total) . Você deve ter apenas um id único para cada elemento. Mas pode ser que seja apenas para teste, já que você não os usa.

EDITADO

Como bem sugerido pelo @JuniorNunes, se você quiser manter os dois "sistemas", você pode modificar seu método calculate e checar se o elemento é um input através do método is do jQuery. Algo assim:

function calculate(obj) {

    var obj_price = $(obj).closest('.cart_item').find('.amount');
    var obj_total = $(obj).closest('.cart_item').find('.total_amount');

    var price = parseFloat( (obj_price.is("input") ? obj_price.val() : obj_price.text()) ) || 0;
    var quantity = parseInt($(obj).closest('.cart_item').find('.qty').val());
    var total = price * quantity;

    if (obj_price.is("input")) {
        obj_total.val(total);
    } else {
        obj_total.text(total);
    }
}

Fiddle aqui: https://jsfiddle.net/mrlew/qvaf5bkj/2/

2
  • 1
    Pelo que eu entendi ele vai precisar dos 2 funcionando, esse seu jeito funciona. mas seria legal se você colocasse uma condição para checar se é um input ou um span para fazer a lógica certa. +1 Commented 17/01/2017 às 13:06
  • Era isso mesmo @mrlew o Span nao seria necessario os IDs repetidos era apenas para teste eu vou trazer os IDs do BD Commented 17/01/2017 às 13:09
-1

Não vou me atentar exclusivamente para a qualidade do seu código, vou direto responder a sua dúvida sobre o evento do input.

Da mesma forma como você tem um tratamento para quando clicarem na "seta para cima" e "seta para baixo" dentro do input, basta adicionar um evento input no elemento para atingir o que você quer.

function calculate(obj){
                var price = parseFloat($(obj).parent().parent().parent().find('.amount').text()) || 0;
                var quantity = parseInt($(obj).parent().find('.qty').val());
                var total = price * quantity;
               $(obj).parent().parent().parent().find('.total_amount').text(isNaN(total) ? 0 : total); //adicionei somente uma validação aqui de NaN
            }
    
            function changeQuantity(num,obj){
         
                $(obj).parent().find('.qty').val( parseInt($(obj).parent().find('.qty').val())+num);
            }
    
            $().ready(function(){
                //calculate();
                $(".minus").click(function(){
                    changeQuantity(-1,this);
                    calculate(this);
                });
                $(".plus").click(function(){
                    changeQuantity(1,this);
                    calculate(this);
                });
    
               
    			$(".qty").keyup(function(e){
    				if (e.keyCode == 38)   changeQuantity(1,this);
                    if (e.keyCode == 40) changeQuantity(-1,this);
                    calculate(this);
                });
    
               
    			$(".qty").on("input", function(e){
                    calculate(this);
                });
    
    
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table cart">
  <thead>
     <tr>
       <th class="cart-product-thumbnail">&nbsp;</th>
       <th class="cart-product-name">Produto</th>
       <th class="cart-product-quantity">Quantidade</th>
       <th class="cart-product-price">Precço Unitario</th>
       <th class="cart-product-subtotal">Total</th>
     </tr>
   </thead>
   <tbody>
     <tr class="cart_item">
       <td class="cart-product-thumbnail"></td>
       <td class="cart-product-name">
         <a href="#">Pera</a>
       </td>
       <td class="cart-product-quantity">
          <div class="quantity clearfix">
             <input type="button" value="-" class="minus" field="quantity">
              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
               <input type="button" value="+" class="plus" field="quantity">
           </div>
        </td>
        <td class="cart-product-price">
          R$ <span id="price" class="amount">50000</span>
        </td>
        <td class="cart-product-subtotal">
           <span id="total" class="total_amount"></span>
        </td>
        </tr>
           <tr class="cart_item">
              <td class="cart-product-thumbnail"></td>
              <td class="cart-product-name">
                 <a href="#">Uva</a>
              </td>
              <td class="cart-product-quantity">
                 <div class="quantity clearfix">
                     <input type="button" value="-" class="minus" field="quantity">
                     <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                      <input type="button" value="+" class="plus" field="quantity">
                  </div>
               </td>
               <td class="cart-product-price">
                   R$ <span id="price" class="amount">40000</span>
                </td>
      
                <td class="cart-product-subtotal">
                   <span id="total" class="total_amount"></span>
                 </td>
             </tr>
              <tr class="cart_item">
                 <td class="cart-product-thumbnail"></td>
      
                <td class="cart-product-name">
                  <a href="#">Teste 3</a>
                </td>
      
       
      
                      <td class="cart-product-quantity">
                          <div class="quantity clearfix">
                              <input type="button" value="-" class="minus" field="quantity">
                              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                              <input type="button" value="+" class="plus" field="quantity">
                          </div>
                      </td>
                      <td class="cart-product-price">
                          R$ <span id="price" class="amount">35000</span>
                      </td>
      
                      <td class="cart-product-subtotal">
                          <span id="total" class="total_amount"></span>
                      </td>
      
                      
                  </tr>
                  
      
                               <tr class="cart_item">
      
      
                      <td class="cart-product-thumbnail">
      
                      </td>
      
                      <td class="cart-product-name">
                          <a href="#">Teste 4</a>
                      </td>
      
       
      
                      <td class="cart-product-quantity">
                          <div class="quantity clearfix">
                              <input type="button" value="-" class="minus" field="quantity">
                              <input type="text" id="quantity" name="quantity" value="1" class="qty" />
                              <input type="button" value="+" class="plus" field="quantity">
                          </div>
                      </td>
                      <td class="cart-product-price">
                          R$ <span id="price" class="amount">35600</span>
                      </td>
      
                      <td class="cart-product-subtotal">
                          <span id="total" class="total_amount"></span>
                      </td>
      
                      
                  </tr>
           </tbody>
      </table>

1
  • Algo de errado com a resposta? Favor indicar para que eu possa corrigir. Commented 17/01/2017 às 13:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .