Question

我在下面有这个html，用户可以选择多少＆＃34;注册＆＃34;想要每种注册类型。

根据此选择，使用类＆＃34; .total＆＃34;应该显示总数。

我有这个html和jquery，并且工作得很好，可以在课堂上显示总数＆＃34;。总＆＃34;根据用户选择菜单选择：https://jsfiddle.net/ev1ccmyL/。问题是我正在使用静态注册类型＆＃34; general＆＃34;和＆＃34;加＆＃34;并使用默认值。

动态代码的html如下所示。你知道如何更改jQuery以使用下面的动态值吗？

<div class="card_body">
  <ul>

    @foreach($registration_types as $rtype)
    <li class="list-group-item d-flex align-items-center justify-content-between">
      <div class="w-100">
        <span>{{$rtype->name}}</span>
      </div>
      <form>
        <select id="{{$rtype->name}}">
          @for ($i = $rtype->min_participants; $i <= $rtype-> max_participants; $i++)
          <option >{{ $i }}</option>
          @endfor
          </select>
          </form>
        <span class="font-size-sm w-50 text-right">X {{$rtype->price}}€</span>
        </li>
      @endforeach


    <li class="list-group-item d-flex align-items-center justify-content-between">
      <div>
        <span>TOTAL</span>
      </div>
      <span class="total">0.00€</span>
    </li>
  </ul>

</div>

Answer 1

更新您的选择，如下所示。

选择元素：

<select class="rtype_name" id="rtype_{{ $rtype->id }}" data-price="{{ $rtype->price }}" name={{ $rtype->name }}>`

在你的js文件更新中如下。

$('body').on("change", ".rtype_name", function () { 
    var total = 0; 

    $('.rtype_name').each(function(i, obj) { 
        var value = +$(this).val(); 
        var price = $(this).data('price');
        if(value && price) { 
            total = total + (value * price); 
        } 
    }); 

    var total = total.toFixed(2)+"€" 
    $(".total").text(total); 
});

[使用Jquery代码，因为有问题的jquery标记，]

获取动态值，求和并显示<span>元素

1 个答案: