Question

我有供用户选择的产品列表。当用户选择产品时，将显示价格，用户输入数量以计算所有选定产品的总价格。

现在使用我的代码，第一个选定产品的总价格对于之后选择的所有其他产品显示相同。即

如果用户选择Fifa and PRO，PRO的总价格将显示为PRO，如下所示

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

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

但这就是我想要的

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>

更新

 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

您正在使用相同的ID附加动态标记，请考虑向ID添加内容

id="xxx"+"_"+i

是我的索引

Answer 2

有几个步骤可以解决这个问题，因为有几个同时出现的问题。即（1）您在HTML中重复使用id值;（2）当您想要这样做时，您试图在页面上全局获取和更新值相对调用事件的元素。

首先，使用id值替换动态HTML字符串中的所有class。这样可以通过重复使用id值来防止HTML无效。类似的东西：

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

另外，从onKeyUp元素中删除<input>内联处理程序：

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

接下来，使用jQuery和事件委派绑定您的keyup事件。在父元素上有一个声明的事件处理程序来处理事件：

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

此事件处理程序替换您的final()函数。这应该处理多个id问题，但现在在这个事件处理程序中我们需要导航DOM以找到您正在寻找的元素。

首先，将动态元素包装在某种容器中。任何<div>都可以。类似的东西：

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

然后我们可以使用该容器作为停止点来上下导航以查找目标元素。首先，我们可以从事件抛出元素本身找到“数量”。所以不要这样：

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

我们可以使用元素本身：

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

对于其他值，它是一个相邻元素。这将涉及在DOM上下导航以找到该元素。所以不要这样：

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

您可以这样做：

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

注意它是如何从抛出事件的元素（this）开始，导航到容器（<div>），然后返回到目标元素（.price）。这应该标识您要查找的特定元素，相对于抛出事件的元素。

对您的其他元素，选择器等重复这些相同的更正

（另一个潜在的问题可能是.append()和.appendTo()的奇怪组合使用，我不确定那是什么。你应该只需要其中一个。）

使用Javascript计算产品总和

2 个答案: