动态选择/取消选择事件中的项目并获取数据属性

Question

我有 5 个圆圈可供点击。用户只能选择一个。我的问题是我无法取消选择前一个圆圈并从变量中删除其data-value。

我该如何处理？

HTML

<div class="question">
   <h3>' + test + '</h3>
   <div class="row" style="padding-top:50px;">
      <div class="col-xl-4 col-lg-3 col-md-2 col-sm-2 col-xs-3 text-center"> <span>Całkowicie nietrafnie mnie opisuje</span> </div>
      <div class="col-xl-4 col-lg-6 col-md-8 col-sm-8 col-xs-6 text-center">
         <div class="circles">
            <div class="numberCircle" data-value="1">1</div>
            <div class="numberCircle" data-value="2">2</div>
            <div class="numberCircle" data-value="3">3</div>
            <div class="numberCircle" data-value="4">4</div>
            <div class="numberCircle" data-value="5">5</div>
         </div>
      </div>
      <div class="col-xl-4 col-lg-3 col-md-2 col-sm-2 col-xs-3 text-center"><span>całkowicie trafnie mnie opisuje</span></div>
   </div>
</div>

JS

pinEventAction = function (e) {
    var progressBar = document.querySelector('#progressBar .bar');
    var circles = document.querySelectorAll('.question .circles .clicked');

    if (e.target.hasAttribute('data-value')) {
        values += Number(e.target.getAttribute('data-value'));
        e.target.className += ' clicked';
        e.target.parentNode.className += ' checked';
        width += 2;
        progressBar.style.width = width + '%';
    }

    if (e.target.classList.contains('clicked')) {
        e.target.classList.remove('clicked')
    }
    console.log('score: ' + values);
};

handleClickAndProgressBar = function () {
    var progressBar = document.querySelector('#progressBar .bar');
    var circles = document.querySelectorAll('.question .circles');

    for (var i = 0; i < circles.length; i++) {
        circles[i].addEventListener('click', pinEventAction);

    }
};

Answer 1

无需在每个圈子上添加 eventListener，您可以将 eventListener 添加到祖先节点。通过使用event.target 属性，您可以确定单击了哪个节点。阅读Event Delegation了解详情。

圆圈所需的行为就像一组具有相同名称属性的单选按钮（只能选中一个）。我将圆圈更改为收音机/标签对，然后将它们包装成<fieldset> 和<form>。通过这样做，您不必为前面提到的行为编写代码。

此演示执行以下操作：

• 只允许一个活动圈子
• 允许打开/关闭圆圈
• 根据选择/取消选择更新值
• 显示值

演示

var form = document.forms[0];

form.addEventListener('click', circle, false);

function circle(e) {

  if (e.target !== e.currentTarget) {
    var val = this.elements.view;
    var tgt = e.target;
    if (tgt.tagName === 'FIELDSET') {
      return;
    }
    if (tgt.classList.contains('act')) {
      tgt.classList.remove('act');
      val.value = 0;
    } else if (!tgt.classList.contains('act')) {
      tgt.classList.add('act');
      val.value = tgt.value;
    }
  } else {
    if (val.value === undefined) {
      val.value = 0;
    }
    return false;
  }
  e.stopPropagation();
}

.rad {
  display: none
}

.l {
  background: black;
  color: gold;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  margin: 0 auto;
  padding-top: 3px;
  display: block;
}

.rad:checked+label.l.act {
  color: cyan
}

.rad:checked+label.l.act::before {
  content: '<'
}

.rad:checked+label.l.act::after {
  content: '>'
}

#view {
  color: tomato;
  font-weight: 900

}

<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>

<div class="question">
  <h3>' + test + '</h3>
  <div class="row" style="padding-top:50px;">
    <div class="col-xs-3 text-center"> <span>Całkowicie nietrafnie mnie opisuje</span> </div>
    <form class="col-xs-6 text-center">
      <output id='view'>0</output>
      <fieldset class="circles">
        <input id='rad1' class='rad' name='rad' type='radio' value="1">
        <label class="l" for='rad1'>1</label>
        <input id='rad2' class='rad' name='rad' type='radio' value="2">
        <label class="l" for='rad2'>2</label>
        <input id='rad3' class='rad' name='rad' type='radio' value="3">
        <label class="l" for='rad3'>3</label>
        <input id='rad4' class='rad' name='rad' type='radio' value="4">
        <label class="l" for='rad4'>4</label>
        <input id='rad5' class='rad' name='rad' type='radio' value="5">
        <label class="l" for='rad5'>5</label>
      </fieldset>
    </form>
    <div class="col-xs-3 text-center"><span>całkowicie trafnie mnie opisuje</span></div>
  </div>
</div>