0
146
VisualizaçõesWrapped Img no se recoge en JS
He estado atascado en esto durante unos días. Probé diferentes selectores y desenvolví el img en el div si ese era el problema, pero no tuve suerte. He estado tratando de hacer un acordeón. Estoy tratando de agregar una clase de "rotar" a la imagen con la clase de "flecha". De modo que cuando se haga clic en la etiqueta de pregunta, la flecha img también girará.
const questionTag = document.querySelectorAll('.question') questionTag.forEach(questionTag => { questionTag.addEventListener('click', () => { if (questionTag.classList.contains('open')) { questionTag.classList.remove('open'); } else { const questionTagOpen = document.querySelectorAll('.open'); questionTagOpen.forEach((questionTagOpen) => { questionTagOpen.classList.remove('open'); }); questionTag.classList.add('open'); } }); }); .question + .answer { display: none; overflow: hidden; transition: all ease 1s; } .question.open + .answer { display: block; } .arrow.rotate { transform: rotate(180deg); } <div class="container"> <div class="question">How many team members can I invite? <img class="arrow" src="./images/icon-arrow-down.svg"> </div> <div class="answer">You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</div> </div>
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
Te falta [0] en tu código.
La etiqueta de arrowTag proviene de document.querySelectorAll() , que devuelve una NodeList , debe especificar el elemento de esa NodeList :
var questionTag = document.querySelectorAll('.question') questionTag.forEach(questionTag => { questionTag.addEventListener('click', () => { if (questionTag.classList.contains('open')) { questionTag.classList.remove('open'); } else { const questionTagOpen = document.querySelectorAll('.open'); questionTagOpen.forEach((questionTagOpen) => { questionTagOpen.classList.remove('open'); }); questionTag.classList.add('open'); } }); var arrowTag = document.querySelectorAll('img.arrow') questionTag.addEventListener('click', () => { arrowTag[0].classList.toggle('rotate'); // missing [0] added here }); }); La función addEventListener se aplica a un objetivo de evento . Por lo tanto, no puede aplicarlo a NodeList , que está almacenado en su arrowTag :
·
Juan Pablo Isaza
Relatório
Responde à pergunta