使用Javascript动态更改值

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

在我的代码中，这就是正在发生的事情。当我选择

MacBook

并输入数量时，我可以计算实际总价，但在我选择另一种产品后，它会全局更改已选择的每种产品的

总价

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

       });

选择的功能选项（产品）
{
$（'.container'）。追加(
''+
'id！！}“name=“{！！$product->name！！}”value=“{！！$product->price！！}”/>

PS：我试图创建一个工作片段，但无法使其工作，这是一个新的线程，用于回答这一行已经提出的问题

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

更改具有类
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);
});

您应该以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);

   });

}

选择的功能选项（产品）
{
$（'.container'）。追加(
''+
'每次调用
optionselected
都会向
#container
@Andreas添加一个新的
keyup
事件侦听器，请问这对它有什么影响？如果您能详细说明，如果在jQuery中以$（“#yourID”）的形式编写，会怎么样。keydown（函数（）{optionselected（）；}）；@AliSajid我不理解你的陈述1.我只是告诉你你的代码有问题。如果这是问题的答案，我会把它作为答案添加。2.在：
value='+product.id+'name=“product[]/>”
3.你的问题中没有与.total相关的代码
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);

   });

}