Question

如何根据所选产品动态更改段落的值？

在我的代码中，这就是正在发生的事情。当我选择MacBook并输入数量时，我能够实际的总价格，但在我选择另一个产品后，它会全局更改已选择的每个产品的Total。

    Item: MacBook 

    Amount : 8900

    Qty : 1

    Total : 1200


   Item : HP Probook

   Amount : 1200

   Quantity: 1

   Total:  1200

JS

 function OptionsSelected(product)
{

    $('.container').append(
        '<div class="product">'+
     '<input type="hidden"  value='+product.id+'    name="product[] />'+
     '<p class="name"> Item: ' + product.name + '</p>'+
        '<p class="price"   data-price="'+product.value+'">Price  :  ' + product.value + '</p>'+
        '<input type="text" class="quantity" name="quantity" />'+
        '<p class="total">Total  $:<span></span></p>'+
         '</div>'

    ).appendTo('form')

    $('.container').on('keyup','.quantity',function()

       {
        var a = Number($(this).val());
        var b = Number($(this).closest('div').find('.price').data('price'));    
        c = a * b;
        //debugger --breakpoint
        alert('Debugging prices for items selected  ' +b);

        $(".total span").text(c);

       });

HTML

  <input onclick="return OptionsSelected(this)" type="checkbox" id="{!! $product->id !!}" name="{!! $product->name !!}" value="{!! $product->price !!}" /> 

<div class="container" id="container">


</div>

PS ：我试图创建一个工作片段，但我无法正常工作，这是一个已经问过的问题的新线程

Answer 1

这一行

$(".total span").text(c);

更改具有类total

的每个元素的内容

使用this（已经完成以获取正确的数量）仅更改已更改产品的.total

$('.container').on('keyup', '.quantity', function () {
    var quantityInput = $(this);
    var product = quantityInput.closest('div');

    var quantity = Number(quantityInput.val());
    var price = Number(product.find('.price').data('price'));

    product.find(".total span").text(quantity * price);
});

Answer 2

您应该通过ID定位附加产品，并使用此ID作为选择器来附加keyup事件：

function OptionsSelected(product)
{

  $('.container').append(
      '<div class="product" id=product'+ product.id +'>'+
      '<input type="hidden"  value='+product.id+'    name="product[] />'+
      '<p class="name"> Item: ' + product.name + '</p>'+
      '<p class="price"   data-price="'+product.value+'">Price  :  ' + product.value + '</p>'+
      '<input type="text" class="quantity" name="quantity" />'+
      '<p class="total">Total  $:<span></span></p>'+
      '</div>'

   );

   $(document).find('#product'+product.id+'>.quantity').keyup(function() {
      var a = Number($(this).val());
      var b = Number($(this).closest('div').find('.price').data('price'));    
      c = a * b;

      $(this).next('.total').children('span').text(c);

   });

}

试试这个小提琴fiddle

使用Javascript动态更改值

2 个答案: