再次點擊后無法洗掉課程

我試圖給我點擊的文本著色，給他們一個類，除了我點擊原始顏色的文本之外，我再次點擊了文本，但是當我點擊文本兩次時，該類無法洗掉。我使用切換類來解決這個問題，但不起作用。

.red {
    color: red;
  }

<ul>
    <li class="txt">Lorem ipsum dolor.</li>
    <li class="txt">Lorem ipsum dolor.</li>
    <li class="txt">Lorem ipsum dolor.</li>
  </ul>

const txts = document.querySelectorAll('.txt');
  const txtColor =(txt)=> {
    txt.addEventListener('click', e => {
      if(e.target.classList.contains('txt')) {
        txts.forEach(txt => txt.classList.remove('red'));
        e.target.classList.toggle('red');
      }
    });
  }
  txtColor(document.querySelector('ul')); 

uj5u.com熱心網友回復：

快取主串列元素和串列項，然后將一個偵聽器附加到串列元素，這樣您就可以使用事件委托來捕獲項單擊事件，因為它們“冒泡”了 DOM。

當一個專案被點擊移除red類的所有專案，并根據您傳遞給條件引數toggle，（請問classList含有red類）toggle的red類。

// Cache the elements
const ul = document.querySelector('ul');
const lis = document.querySelectorAll('.txt');

// Add a listener to the list
ul.addEventListener('click', handleClick, false);

function handleClick(e) {

  // Destructure the nodeName and classList from the
  // the element we clicked on
  const { nodeName, classList } = e.target;

  // Check if it's a list item
  if (nodeName === 'LI') {

    // Does the list item contain a red class?
    const isRed = classList.contains('red');

    // Remove all the red classes from all the items
    lis.forEach(li => li.classList.remove('red'));

    // And depending on the answer to `isRed`
    // toggle the class on or off
    classList.toggle('red', !isRed);

  }

}

.red { color: red; }
.txt:hover { cursor: pointer; }

<ul>
  <li class="txt">Lorem ipsum dolor.</li>
  <li class="txt">Lorem ipsum dolor.</li>
  <li class="txt">Lorem ipsum dolor.</li>
</ul>

附加檔案

• 解構賦值

uj5u.com熱心網友回復：

使用 jQuery，我可以完成這項作業。

$('ul li').on('click', function(){
  $(this).toggleClass('text')
});

.text {
color:red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="txt">Lorem ipsum dolor.</li>
  <li class="txt">Lorem ipsum dolor.</li>
  <li class="txt">Lorem ipsum dolor.</li>
</ul>

uj5u.com熱心網友回復：

這是我的答案。請參閱每個部分的評論。

const txts = document.querySelectorAll('.txt');

const txtColor = (txt) => {
  // click on li item
  txt.addEventListener('click', e => { 
    // if target contains class txt, which in case, it's hard coded
    // this will always return true
    if (e.target.classList.contains('txt')) {
      // remove red class for each list item with class txt
      // in this line, it removes every 'red' class on each list item
      txts.forEach(txt => txt.classList.remove('red'));
      // Then toggle 'red' class if it's not present on the target
      // Toggle does as it say, if its not present, it adds the token
      // if it's present, it removes it.
      // since the statement above ALWAYS removes the red class,
      // Toggle will only always add the 'red' class
      
    }
    e.target.classList.toggle('red');
  });
}

txtColor(document.querySelector('ul'));

如果我是對的，我認為這就是你想要做的。

document.querySelector('ul').addEventListener("click", (e) => {
    // if target doesn't contain red class, then remove all red class from the list
    
    if(!e.target.classList.contains("red")) {
        document.querySelectorAll("li").forEach(e => e.classList.remove("red"))
    }
    // toggle red class to the target
    e.target.classList.toggle("red")
})

標籤：javascript dom事件 切换

上一篇：如何檢查陣列是否為空？[復制]

下一篇：如何在js的forof回圈中使用.indexOf