洗掉JavaScript中的點擊-有解無憂

一切還好吧？我正在做一個 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>

我試著檢查一下，如果 onclique 是真的，它會變成假的，但我沒有得到想要的結果

uj5u.com熱心網友回復：

而不是這個：

常量顏色 = 圓 [j] === el ？'hsl(25, 97%, 53%)' : '#262d37'; 圓[j].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%);
}

uj5u.com熱心網友回復：

如果您想要選擇/取消選擇邏輯，您可以嘗試在單擊按鈕時設定一個類，如果再次單擊則將其洗掉。

為此目的，在元素的 classList 中有切換方法（如果它沒有類，則添加或洗掉它）

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

對于每個圓圈，切換“選定”類。我將圈子重命名為圈子（它是圈子的集合）。

PS：使用類代替修改行內樣式通常是更好的做法。

提交時沒有邏輯的簡單片段

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>

uj5u.com熱心網友回復：

您需要添加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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/452209.html

標籤：javascript dom dom 事件

上一篇：未捕獲的型別錯誤：無法讀取null的屬性（正在讀取“appendChild”）；持續錯誤

下一篇：正確匹配每個影像檔案的名稱[PHP]