Skip to main content
4 de 4
adicionou 842 caracteres ao conteúdo
luiscrjr
  • 1,5mil
  • 8
  • 17

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/

luiscrjr
  • 1,5mil
  • 8
  • 17