Question

我想在我的页面上总结元素的值。它们由Slider元素和Checkbox元素组成。我的滑块有一类＆＃34; .valuez＆＃34;我用＆＃34;输入[type = checkbox]＆＃34;来定位我的复选框。下面的片段分别很好用，但是我需要它们作为一个片段来最终给我页面上所有值的总和。

＆＃13;

$('.valuez').change(function(){
  var sum = 0;
  $('.valuez').each(function(){
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });

  $('li').html(sum);
});



$('input[type=checkbox]').change(function(){
  var sum = 0;
  $('input[type=checkbox]').each(function(){
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });

  $('li').html(sum);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 1

您可以将其分解为函数：

$('.valuez').change(updateTotal);
$('input[type=checkbox]').change(updateTotal);


function sumSlider(){

  var sum = 0;
  $('.valuez').each(function(){
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });

  return sum;
}

function sumCheckbox(){
  $('input[type=checkbox]').each(function(){
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });

  return sum;
}

function updateTotal(){
   $('li').html(sumSlider() + sumCheckbox());
}

Answer 2

您可以同时选择.valuez和复选框：

$('input[type=checkbox], .valuez').change(function(){
  var sum = 0;
  $('input[type=checkbox], .valuez').each(function(){
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });

  $('li').html(sum);
});

滑块和复选框的值之和（jQuery）

2 个答案: