Intenté colorear el texto en el que hice clic dándoles una clase y, además, el texto en el que hago clic vuelve a tener el color original, pero cuando hago clic en el texto dos veces, la clase no se puede eliminar. Utilizo la clase de alternancia para este problema, pero no funciona.
.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'));Guarde en caché el elemento de la lista principal y los elementos de la lista, y luego adjunte un oyente al elemento de la lista para que pueda usar la delegación de eventos para capturar eventos de clics en elementos a medida que "burbujean" el DOM.
Cuando se hace clic en un elemento, elimine la clase red de todos los elementos y, según el parámetro condicional que pase para toggle , (la lista de classList contiene una clase red ) toggle la clase 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>Documentación adicional
Usando jQuery, podría hacer que esto funcione.
$('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>Aquí está mi respuesta. Por favor vea los comentarios en cada sección.
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'));Si tengo razón, creo que esto es lo que estás tratando de hacer.
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") })