javascript - 动态选择/取消选择事件中的元素并获取数据属性

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>