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添加到祖先节点。通过使用<fieldset>属性，您可以确定单击了哪个节点。请阅读Event Delegation了解详情。

圈子所需的行为就像一组共享相同名称属性的单选按钮（只能检查一个）。我将圈子更改为广播/标签对，然后将其包装为<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(); }。通过这样做，可以避免为前面提到的行为编写代码。

此演示执行以下操作：

仅允许一个活动圈
允许开启/关闭圈子
根据选择/取消选择的内容更新值
显示值

演示

＆＃13;

.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

}

＆＃13;

<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>

＆＃13;

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

1 个答案:

演示