使用Javascript计算产品总和

Question

I have list of products for users to select. When user selects a product, the price is displayed and the user enters the quantity to calculate the total price for all selected products.

Now with my code, the total price for the first selected product appears the same for all other products selected afterwards. ie

If user selects Fifa and PRO the total price for FIFA appears for PRO as below

Item : Fifa    
Price : 100eu    
Quantity : 4    
Total price : 400eu  

Item : PRO     
Price: 50eu    
Quantity: 1    
Total Price: 400eu

But this is what i am looking to have

Item : Fifa            
Price : 100eu            
Quantity : 4            
Total price : 400eu          

Item : PRO             
Price: 50eu            
Quantity: 1            
Total Price: 50eu

Total Order Price = 400eu + 50eu = 450eu

JS

public selectGame(game){
     $(".gameshop").append(
            '<p id="name">Item: ' + game.name + '</p>'+
            '<p name="price" id="price" data-price="'+game.price+'"> Price  :  ' + game.price + '</p>'+
            '<input type="text"  onKeyUp="final()" id="quantity"  name="quantity" />' +
            '<p id="final_price">Total Price  $:<span></span></p>').appendTo('form')    
}

function final()
{        
    a = Number($('#quantity').val());
    b = Number($('#price').data("price"));
    c = a * b;

    $("#final_price span").text(c);    
}

HTML

        <form class="form-horizontal" method="post">
    @foreach ($errors->all() as $error)
    <p class="alert alert-danger">{{ $error }}</p>
    @endforeach
    @if (session('status'))
    <div class="alert alert-success">
            {{ session('status') }}
        </div>
    @endif
    {!! csrf_field() !!}
    <fieldset>

    <div class="panel label_container">
<input onclick="return selectGame(this)" type="checkbox" id="{!! $game->id !!}" " /> 
   <label class="mylabel" >  </label>

</div>
    <legend>Games</legend> 

    <div class="gameshop" id="gameshop">



    </div>


            </div>
        </fieldset>
    </form>

Update

 function selectGame(game)
{

    $('.gameshop').append(
        '<div class="item">'+
        '<p class="name"> Item: ' + game.name + '</p>'+
        '<p class="price"   data-price="'+game.price+'"> Price  :  ' + game.price + '</p>'+
        '<input type="text"   class="quantity" name="quantity" />'+
        '<p class="total">Total Price  $:<span></span></p>'+
         '</div>'

    )

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

       {

        var a = Number($(this).val());
        var b = Number($(this).closest('div').find('.price').data('price'));

        alert(b);



       });

}

Answer 1

You are appending dynamically tags with same ids, consider adding something to the id such

id="xxx"+"_"+i 

being i an index

Answer 2

There are a few steps to correct this, since there are a couple of simultaneous problems. Namely (1) you're re-using id values in your HTML and (2) you're trying to get and update values globally on the page when you want to get do so relatively to the element invoking the event.

First, replace all of your id s in your dynamic HTML string with class values instead. This will prevent the HTML from being invalid by re-using id values. Something like:

'<p class="name">Item: ' + game.name + '</p>'+
//... and so on

Also, remove your onKeyUp inline handler from the <input> element:

'<input type="text" class="quantity" name="quantity" />'+

Next, bind your keyup event using jQuery and event delegation. Have a single declared event handler on a parent element to handle the event:

$('.gameshop').on('keyup', '.quantity', function () {
    //...
});

This event handler replaces your final() function. This should take care of the multiple- id problem, but now inside this event handler we need to navigate the DOM to find the elements you're looking for.

First, wrap your dynamic elements in a container of some sort. Any <div> will do. Something like:

'<div class="product">'+    // <--- here
'<p class="name">Item: ' + game.name + '</p>'+
//...
'<p class="final_price">Total Price  $:<span></span></p>'+
'</div>'    // <--- and here

Then we can use that container as a stopping point to navigate up and down the DOM to find the target elements. First, we can find the "quantity" from the event-throwing element itself. So instead of this:

a = Number($('#quantity').val());

We can just use the element itself:

var a = Number($(this).val());

For other values, it's a neighboring element. This would involve navigating up and down the DOM to find that element. So instead of this:

b = Number($('#price').data("price"));

You can do something like this:

var b = Number($(this).closest('div').find('.price').data('price'));

Notice how it starts from the element throwing the event ( this ), navigates up to the container ( <div> ), then back down to the target element ( .price ). This should identify the specific element you want to find, relative to the one throwing the event.

Repeat these same corrections for your other elements, selectors, etc.

There could very well be other issues here, but these appear to be the main structural/logical problems you're encountering. (Another potential problem could be that strange combined use of .append() and .appendTo() , I'm not really sure what that's accomplishing. You should only need one of those.)