如何总结数据属性3不同的总价格？ [英] how sum data attribute 3 different total price?

问题描述

我选择了选项，并且它与数据属性进行了值的总和。
it sum＃mark1 +＃series1 +＃mark2 +＃series2

function validate（）{var $ selected = $（'＃mark1，＃series1，＃mark2，＃series2'）。children（：selected）; var sum = 0; $ selected.each（function（）{sum + = $（this）.data（'price'）|| 0;}）; $（'＃total'）。html（sum === 0？''：sum +'$'）;} validate（）; $（'＃mark1，＃series1，＃mark2，＃series2'）。 'change'，function（）{validate（）;}）;

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< form> < select id =mark1name =mark1> < option value =>  - < / option> < option value =bmwdata-price =200> bmw< / option> < option value =audidata-price =400> audi< / option> < /选择> < select id =series1name =series1> < option value =>  - < / option> < option value =series-1data-price =2000> 3 series< / option> < option value =series-1data-price =3000> 5 series< / option> < /选择> < select id =mark2name =mark2> < option value =>  - < / option> < option value =bmwdata-price =200> bmw< / option> < option value =audidata-price =400> audi< / option> < /选择> < select id =series1name =series2> < option value =>  - < / option> < option value =series-1data-price =2000> 3 series< / option> < option value =series-1data-price =3000> 5 series< / option> < /选择> < div id =total1> < / DIV> < div id =total2> < / DIV> < div id =total> < / div>< / form>  

那么，total1给出总和1和1，总数2给出总和2和2。
total给出总和mark1，series1，mark2，series2

解决方案

这个答案对您有帮助吗？

我们可以简单地从id属性中提取id号并显示在id total 的相应div中。如果您在实施过程中遇到问题，请告诉我们！

$（'＃snippet-code-js lang-js prettyprint- （'change'，function（）{var $ selected = $（'＃mark1，＃series1，＃mark2，＃series2'）。children（：selected ）; var sum = 0; var id = $（this）.attr（id）[$（this）.attr（id）。length - 1]; $ selected.each（function（）{sum + = $（this）.data（'price'）|| 0;}）; $（'＃total'+ id）.html（sum === 0？''：sum +'$'）; var total = 0; sum = 0; $（div [id * = total]：not（#total））。each（function（）{$（this）.each（function（）{var val = $（this）。 text（）。replace（$，）|| 0 sum + = val * 1;}）;}）; $（div＃total）。html（sum === 0？''：sum +'$'）;}）。trigger（change）;

 < script src =ht TPS：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< /脚本><形式> < select id =mark1name =mark1> < option value =>  - < / option> < option value =bmwdata-price =200> bmw< / option> < option value =audidata-price =400> audi< / option> < /选择> < select id =series1name =series1> < option value =>  - < / option> < option value =series-1data-price =2000> 3 series< / option> < option value =series-1data-price =3000> 5 series< / option> < /选择> < select id =mark2name =mark2> < option value =>  - < / option> < option value =bmwdata-price =200> bmw< / option> < option value =audidata-price =400> audi< / option> < /选择> < select id =series2name =series2> < option value =>  - < / option> < option value =series-1data-price =2000> 3 series< / option> < option value =series-1data-price =3000> 5 series< / option> < /选择> < div id =total1> < / DIV> < div id =total2> < / DIV> < div id =total> < / div>< / form>  

I have selected option and it do sum of value with data attribute. it sum #mark1 + #series1 + #mark2 + #series2

function validate() {
  var $selected = $('#mark1, #series1,#mark2, #series2').children(":selected");
  var sum = 0;

  $selected.each(function() {
    sum += $(this).data('price') || 0;
  });

  $('#total').html(sum === 0 ? '' : sum + '$');
}
validate();

$('#mark1, #series1,#mark2, #series2').on('change', function() {
  validate();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="mark1" name="mark1">
              <option value="">--</option>
              <option value="bmw" data-price="200">bmw</option>
              <option value="audi" data-price="400">audi</option>
  </select>

  <select id="series1" name="series1">
              <option value="">--</option>
              <option value="series-1" data-price="2000"  >3 series</option>
              <option value="series-1" data-price="3000"  >5 series</option>
  </select>
  <select id="mark2" name="mark2">
              <option value="">--</option>
              <option value="bmw" data-price="200">bmw</option>
              <option value="audi" data-price="400">audi</option>
  </select>

  <select id="series1" name="series2">
              <option value="">--</option>
              <option value="series-1" data-price="2000"  >3 series</option>
              <option value="series-1" data-price="3000"  >5 series</option>
  </select>

  <div id="total1"> </div>
  <div id="total2"> </div>
  <div id="total"> </div>
</form>

how can i do that, total1 give total sum mark1 and series1 , total2 give total sum mark2 and series2 . total give total sum mark1 , series1, mark2, series2

解决方案

Does this answer help you?

We can simple extract the id number from the id attribute and display in the corresponding div with id total. Please let me know if you face issues during implementation!

$('#mark1, #series1, #mark2, #series2').on('change', function() {
  var $selected = $('#mark1, #series1,#mark2, #series2').children(":selected");
  var sum = 0;
  var id = $(this).attr("id")[$(this).attr("id").length - 1];
  $selected.each(function() {
    sum += $(this).data('price') || 0;
  });

  $('#total'+id).html(sum === 0 ? '' : sum + '$');
  var total = 0;
  sum = 0;
  $("div[id*=total]:not(#total)").each(function(){
    $(this).each(function() {
      var val = $(this).text().replace("$", "") || 0
      sum += val * 1;
    });
  });
  $("div#total").html(sum === 0 ? '' : sum + '$');
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="mark1" name="mark1">
              <option value="">--</option>
              <option value="bmw" data-price="200">bmw</option>
              <option value="audi" data-price="400">audi</option>
  </select>

  <select id="series1" name="series1">
              <option value="">--</option>
              <option value="series-1" data-price="2000"  >3 series</option>
              <option value="series-1" data-price="3000"  >5 series</option>
  </select>
  <select id="mark2" name="mark2">
              <option value="">--</option>
              <option value="bmw" data-price="200">bmw</option>
              <option value="audi" data-price="400">audi</option>
  </select>

  <select id="series2" name="series2">
              <option value="">--</option>
              <option value="series-1" data-price="2000"  >3 series</option>
              <option value="series-1" data-price="3000"  >5 series</option>
  </select>

  <div id="total1"> </div>
  <div id="total2"> </div>
  <div id="total"> </div>
</form>

这篇关于如何总结数据属性3不同的总价格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！