删除JavaScript中的单击

Question

近况如何？我正在做一个JavaScript项目，我必须给出选择一些按钮的选项，如果已经单击的按钮再次被单击，程序必须取消选择它并返回到无按钮单击的状态。我在一些论坛和文档中搜索，我成功地完成了选择选项的部分，但是我做不到，所以再次点击按钮，所有的按钮都没有选择。有人能帮我吗？非常感谢

​

const circle = document.querySelectorAll('.circle');

for (let i = 0; i < circle.length; i++) {
    const el = circle[i];
    el.onclick = () => {
        for (let j = 0; j < circle.length; j++) {
            const color = circle[j] === el ? 'hsl(25, 97%, 53%)' : '#262d37';
            circle[j].style.backgroundColor = color;
        }
    }
}

const submit = document.querySelectorAll('.btn');

for (let i = 0; i < submit.length; i++) {
    const el = submit[i];
    el.onclick = () => {
        for (let j = 0; j < submit.length; j++) {
            const color = submit[j] === el ? '#fff' : 'hsl(25, 97%, 53%)';
            submit[j].style.backgroundColor = color;
            submit[j].style.color = 'hsl(25, 97%, 53%)';
        }
    }
}

.circle {
    border-radius: 50%;
    width        : 15px;
    height       : 15px;
    padding      : 10px;
    margin-left  : 20px;
    display      : inline-block;
    background   : #262d37;
    color        : #e7eaec;
    text-align   : center;
}

.circle:hover {
    border-radius: 50%;
    width        : 15px;
    height       : 15px;
    padding      : 10px;
    margin-left  : 20px;
    display      : inline-block;
    transition   : 0.5s;
    opacity      : 0.7;
    color        : #e7eaec;
    text-align   : center;
}

.btn {
    background-color: hsl(25, 97%, 53%);
    color           : #e7eaec;
    margin-top      : 30px;
    margin-left     : 30px;
    margin-right    : 30px;
    text-align      : center;
    border-radius   : 50px;
    padding-top     : 10px;
    padding-bottom  : 10px;
    font-weight     : 700;
    font-family     : "Overpass", sans-serif;
}

<div class='circle'>1</div> 
<div class='circle'>2</div> 
<div class='circle'>3</div> 
<div class='circle'>4</div> 
<div class='circle'>5</div>
<div class="btn">SUBMIT</div>

​

我试着检查一下，如果那是真的，它会变成假的，但我没有得到想要的结果。

Answer 1

如果您想要选择/取消选择逻辑，您可以尝试在单击按钮时设置类，如果再次单击，则删除该类。

为此，元素的classList中有一个切换方法(如果它没有类，则添加它，否则就删除它)

circles.forEach(c => {
    c.onclick = () => c.classList.toggle('selected')
})

对于每个圆圈，切换类“selected”。我把圆改名为圆圈(它是一个圆圈的集合)。

P.S:使用类代替修改内联样式通常是一种更好的做法。

提交时没有逻辑的简单片段

​

const circles = document.querySelectorAll('.circle');

circles.forEach(c => {
    c.onclick = () => c.classList.toggle('selected')
})

.circle {
    border-radius: 50%;
    width        : 15px;
    height       : 15px;
    padding      : 10px;
    margin-left  : 20px;
    display      : inline-block;
    background   : #262d37;
    color        : #e7eaec;
    text-align   : center;
}

.circle:hover {
    border-radius: 50%;
    width        : 15px;
    height       : 15px;
    padding      : 10px;
    margin-left  : 20px;
    display      : inline-block;
    transition   : 0.5s;
    opacity      : 0.7;
    color        : #e7eaec;
    text-align   : center;
}

.btn {
    background-color: hsl(25, 97%, 53%);
    color           : #e7eaec;
    margin-top      : 30px;
    margin-left     : 30px;
    margin-right    : 30px;
    text-align      : center;
    border-radius   : 50px;
    padding-top     : 10px;
    padding-bottom  : 10px;
    font-weight     : 700;
    font-family     : "Overpass", sans-serif;
}

.circle.selected {
    background-color: hsl(25, 97%, 53%);
}

<div class='circle'>1</div>
<div class='circle'>2</div>
<div class='circle'>3</div>
<div class='circle'>4</div>
<div class='circle'>5</div>
<div class="btn">SUBMIT</div>

​

Answer 2

而不是这样：

const色=圆圈=== el？‘'hsl(25，97%，53%)：’#262 d37‘，circlej.style.backgroundColor =颜色；

你可以切换这个类，这样你就可以

circle[j].classList.toggle(colorWhenClicked)

在html文件中，您将看到类似的代码，

<div class='circle basicColorClass'>1</div> 
<div class='circle basicColorClass'>2</div> 
<div class='circle basicColorClass'>3</div> 
<div class='circle basicColorClass'>4</div> 

现在在css代码中：

.basicColorClass{
    color: #262d37;
}
.colorWhenClicked{
    color: hsl(25, 97%, 53%);
}

Answer 3

您需要添加active类来跟踪哪个圆是活动的，然后我们可以与现有的圆圈进行比较，以决定添加/删除active类。

我还在Javascript中留下了一些评论，您可以查看它。

​

const circle = document.querySelectorAll('.circle');

for (let i = 0; i < circle.length; i++) {
  const el = circle[i];
  el.onclick = (e) => {
    //find the active circle
    const activeCircle = document.querySelectorAll('.circle.active')[0];

    //if it's active, remove `active` class
    if (activeCircle) {
      activeCircle.classList.remove("active");
    }

    //find the current clicked circle
    const currentCircle = e.target;
    //if the current clicked circle is different with the active circle
    //we add the `active` class to the current circle
    //if they're the same, we should not add the active class
    if (currentCircle !== activeCircle) {
      currentCircle.classList.add("active");
    }
  }
}

const submit = document.querySelectorAll('.btn');

for (let i = 0; i < submit.length; i++) {
  const el = submit[i];
  el.onclick = () => {
    for (let j = 0; j < submit.length; j++) {
      const color = submit[j] === el ? '#fff' : 'hsl(25, 97%, 53%)';
      submit[j].style.backgroundColor = color;
      submit[j].style.color = 'hsl(25, 97%, 53%)';
    }
  }
}

.circle {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  padding: 10px;
  margin-left: 20px;
  display: inline-block;
  background: #262d37;
  color: #e7eaec;
  text-align: center;
}

.circle.active {
  background-color: hsl(25, 97%, 53%);
}

.circle:hover {
  border-radius: 50%;
  width: 15px;
  height: 15px;
  padding: 10px;
  margin-left: 20px;
  display: inline-block;
  transition: 0.5s;
  opacity: 0.7;
  color: #e7eaec;
  text-align: center;
}

.btn {
  background-color: hsl(25, 97%, 53%);
  color: #e7eaec;
  margin-top: 30px;
  margin-left: 30px;
  margin-right: 30px;
  text-align: center;
  border-radius: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 700;
  font-family: "Overpass", sans-serif;
}

<div class='circle'>1</div>
<div class='circle'>2</div>
<div class='circle'>3</div>
<div class='circle'>4</div>
<div class='circle'>5</div>
<div class="btn">SUBMIT</div>

​