再次单击后无法删除 class

Question

我试图通过给他们一个 class 来为我点击的文本着色，而且我点击的文本又恢复了原来的颜色，但是当我点击文本两次时 class 无法删除。我使用切换 class 来解决这个问题，但不起作用。

.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'));

Answer 1

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

Answer 2

缓存主列表元素和列表项，然后将一个侦听器附加到列表元素，这样您就可以使用 Event delegation 捕捉项目点击事件，因为它们“冒出” DOM.

单击某个项目时，从所有项目中删除 red class，并根据您传递给 toggle 的条件参数，（classList包含一个red class) toggle red class.

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

其他文档

Destructuring assignment

Answer 3

这是我的答案。请查看每个部分的评论。

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")
})

再次单击后无法删除 class

can't remove class after click again

javascript

dom-events

toggle