时间戳

首页 > 解决方案 > 获取、累加和写入所有值到某个类的元素

javascript - 获取、累加和写入所有值到某个类的元素

问题描述

所以我有这样的代码：

<div class='true' value='1'/>
<div class='false' value='2'/>
<div class='true' value='3'/>
<div id='check'>Check my score</div>
Your score is: <div id='total'/>

我的问题是如何从<div>s中获取所有的值和类.true一起加起来（1 + 3 = 4），然后在我点击4的时候写进去？.totalcheck

到目前为止我尝试过的是：

function checkscore(){
  // where I was stuck to add all the values
};

// I can only get the value and write it in the console
$(function() {
    $('#check').click(function(){
        var values = $('.true').map(function(i,v) {
            return v.value;
        }).get(); 
        console.log(values);
    });
});
    <div class='true' value='1'/>
    <div class='false' value='2'/>
    <div class='true' value='3'/>
    <div id='check'>Check my score</div>
    Your score is: <div id='total'/>

标签： javascripthtmljquery

解决方案

香草javascript：

document.getElementById('check').addEventListener('click', function() {
  let sum = 0;
  
  document.querySelectorAll('.true').forEach(function(el) {
    sum += parseInt(el.getAttribute('value'));
  });
  document.getElementById('total').innerHTML = sum;
});
<div class='true' value='1'/>
<div class='false' value='2'/>
<div class='true' value='3'/>
<div id='check'>Check my score</div>
Your score is: <div id='total'/>

使用 reduce 的香草 javascript：

document.getElementById('check').addEventListener('click', function() {
  let result = [...document.querySelectorAll('.true')].reduce( (acc, item) => {
    return acc + parseInt(item.getAttribute('value'));
  }, 0);
  document.getElementById('total').innerHTML = result;
});
<div class='true' value='1'/>
<div class='false' value='2'/>
<div class='true' value='3'/>
<div id='check'>Check my score</div>
Your score is: <div id='total'/>

注意： [...document.querySelectorAll('.true')]将 HTMLCollection 对象传播到一个数组中。

查询：

$('#check').click(function() {
  let sum = 0;
  
  $('.true').each(function(el) {
    sum += parseInt($(this).attr('value'));
  });
  $('#total').html(sum);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='true' value='1'/>
<div class='false' value='2'/>
<div class='true' value='3'/>
<div id='check'>Check my score</div>
Your score is: <div id='total'/>

推荐阅读