javascript总结所选元素数据值并在取消选择时扣除

Posted 2023-05-09

【中文标题】javascript总结所选元素数据值并在取消选择时扣除

【英文标题】：javascript sum up selected element data value and deduct when unselect

【发布时间】：2021-05-01 11:48:08

【问题描述】：

我有 3 个 div，分别是 item1、item2 和 item3。

item1 与<data-price="10">，item1 与<data-price="20">，item1 与<data-price="30">

我要做的是在选择项目时，它会获取项目的<data-price> 并总结，而如果取消选择所选项目，它将删除/扣除<data-price>。

但我的代码结果只显示所选项目而不是总结。

这是我的 html 代码：

<div id="container2">
  <div class="row">
    <div class="col-md-3"><div id="item1" class="select_itm" data-item="1" data-price="10">Item 1 [Price = 10]</div></div>
    <div class="col-md-3"><div id="item2" class="select_itm" data-item="2" data-price="20">Item 2 [Price = 20]</div></div>
    <div class="col-md-3"><div id="item3" class="select_itm" data-item="3" data-price="30">Item 3 [Price = 30]</div></div>
  </div>
</div>
<br>
<br>
<div>
  <p>Total Price: <span id="display">0</span></p>
</div>

这是我的 javascript 代码：

$(document).ready(function() 
  var image_selected = new Array();
  $('#container2').on('click', ".select_itm", function () 
    var aa = $(this)
    if (!aa.is('.checked'))
      aa.addClass('checked'); 
      var myprice = this.getAttribute('data-price');
      image_selected.push(myprice);
     else 
      aa.removeClass('checked');
      var myprice=this.getAttribute('data-price');
      var index = image_selected.indexOf(myprice);
      if (index > -1) 
        image_selected.splice(index, 1);
      
    
    var price = 0;
    price += image_selected;
    $('#display').html(price);
  );
);

【参考方案1】：

简单的方法是使用checked 类循环遍历checked 元素

is('.checked') 也可以工作，但 is(':checked') 可与输入复选框/收音机一起使用，并检查您可以使用的课程if($(selector).hasClass('checked')) 在此处选中可以是您需要检查的任何课程李>

$(document).ready(function() 
  $('#container2').on('click', ".select_itm", function () 
    var aa = $(this), price = 0;
    aa.toggleClass('checked');                   // toggle the class checked on click
    $(".select_itm.checked").each(function()    // loop through the checked items
      price += parseInt($(this).data('price'));  // get total price of checked items
    );
    $('#display').html(price);  
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container2">
<div class="row">
    <div class="col-md-3"><div id="item1" class="select_itm" data-item="1" data-price="10">Item 1 [Price = 10]</div></div>
    <div class="col-md-3"><div id="item2" class="select_itm" data-item="2" data-price="20">Item 2 [Price = 20]</div></div>
    <div class="col-md-3"><div id="item3" class="select_itm" data-item="3" data-price="30">Item 3 [Price = 30]</div></div>
</div>
</div>
<br>
<br>
<div>
        <p>Total Price: <span id="display">0</span></p>
</div>

注意：parseInt() 函数解析一个字符串参数并返回一个整数，带有parseInt 1 + 1 = 2 没有它"1" + "1" = "11" .. 所以请记住这一点

【讨论】：

不客气@LennonGoh .. 祝你有美好的一天:-)