JavaScript实现点击按钮获取points属性值存数组求和并控制div显隐

核心实现逻辑说明 #

• 提前定义全局数组存储每次点击获取的points值
• 遍历所有带btn类的元素绑定点击事件，用getAttribute方法获取自定义points属性值，注意转为数字类型避免字符串拼接问题
• 用数组reduce方法快速求和，根据求和结果修改两个div的display属性控制显隐
• 若要符合HTML5自定义属性规范，可将原HTML里的points属性改为data-points，直接通过this.dataset.points取值即可

基础样式（控制默认显隐与视觉效果） #

.success, .failure {
  display: none;
  padding: 10px;
  margin: 10px 0;
  border-radius: 4px;
}
.success {
  background: #d4edda;
  color: #155724;
}
.failure {
  background: #f8d7da;
  color: #721c24;
}

原生JavaScript实现代码 #

// 初始化存储points值的数组
const pointsArr = [];
// 获取DOM元素
const btns = document.querySelectorAll('.btn');
const successEl = document.querySelector('.success');
const failureEl = document.querySelector('.failure');

// 给所有按钮绑定点击事件
btns.forEach(btn => {
  btn.addEventListener('click', function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 获取当前按钮points值，转为数字类型
    const currentPoint = Number(this.getAttribute('points'));
    // 存入数组
    pointsArr.push(currentPoint);
    // 数组求和
    const sum = pointsArr.reduce((prev, curr) => prev + curr, 0);
    // 判断显隐逻辑
    if (sum > 3) {
      successEl.style.display = 'block';
      failureEl.style.display = 'none';
      successEl.textContent = `当前总和为${sum}，大于3，判定成功`;
    } else {
      failureEl.style.display = 'block';
      successEl.style.display = 'none';
      failureEl.textContent = `当前总和为${sum}，不大于3，判定失败`;
    }
    // 可选：限制每个按钮仅可点击一次，避免重复累加
    // this.style.pointerEvents = 'none';
    // this.style.opacity = 0.6;
  })
})

jQuery实现版本（项目引入jQuery时可直接使用） #

const pointsArr = [];
$('.btn').click(function(e) {
  e.preventDefault();
  pointsArr.push(Number($(this).attr('points')));
  const sum = pointsArr.reduce((prev, curr) => prev + curr, 0);
  if (sum > 3) {
    $('.success').show().text(`当前总和为${sum}，大于3，判定成功`);
    $('.failure').hide();
  } else {
    $('.failure').show().text(`当前总和为${sum}，不大于3，判定失败`);
    $('.success').hide();
  }
  // 可选：限制每个按钮仅可点击一次
  // $(this).css({pointerEvents: 'none', opacity: 0.6});
})

内容的提问来源于stack exchange，提问作者DNa