javascript - JQuery 向每个数组项添加另一个值并求和

Question

我目前有一个数组，它通过更改许多选择字段的值/选项来填充。例如。如果 dom 中有两个选择字段并且选择的选项是 2 和 3，那么数组将如下所示 - Array [ "2", "3"]

每个选择都有一个数据属性 data-ticketprice 我想将其绑定(bind)到每个选项值。所以我可以得到这两个数字的总和，例如

data attribute = 100
Select option value = 5
Sum = 100 x 5;

HTML -

<select class="ticket-qty" data-ticketprice="280.88" name="34">
    <option value="0">0 Tickets</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
</select>

<select class="ticket-qty" data-ticketprice="390" name="39">
    <option value="0">0 Tickets</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
</select>

当前的 jQuery -

//When select is changed update value to array
$('select.ticket-qty').on('change', function (e) {
    //Map the values for the array
    var arr = $('select.ticket-qty').map(function(){
        return this.value
    }).get()

    //This sums the all the select options (not what I want)
    var total = 0;
    for (var i = 0; i < arr.length; i++) {
        total += arr[i] << 0;
    }
    console.log(total);
});

Answer 1

您需要使用所选数量乘以每件商品的成本来填充您使用 map() 构建的数组，您可以从 data 属性中检索该值。从那里您可以使用 reduce() 来汇总数组中的所有值。像这样:

$('select.ticket-qty').on('change', function(e) {
  var arr = $('select.ticket-qty').map(function() {
    var cost = $(this).data('ticketprice');
    var qty = $(this).val();
    return cost * qty;
  }).get();
  
  var total = arr.reduce((a, b) => a + b, 0);
  console.log(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="ticket-qty" data-ticketprice="280.88" name="34">
    <option value="0">0 Tickets</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
</select>

<select class="ticket-qty" data-ticketprice="390" name="39">
    <option value="0">0 Tickets</option>
    <option value="1">1 Ticket</option>
    <option value="2">2 Tickets</option>
    <option value="3">3 Tickets</option>
    <option value="4">4 Tickets</option>
    <option value="5">5 Tickets</option>
</select>

您应该注意，这一切都可以在一个循环中完成，但我假设您正在构建单独的总计数组以在 UI 的其他地方使用。