Usé alternar para cambiar el icono de icono (-) a este icono (+). pero me atasqué en el problema de cómo cambiar el ícono (+) a este (-) cuando hago clic en otro ícono.
const icn = document.querySelectorAll("span"); icn.forEach(icons => { icons.addEventListener("click", function(e) { e.preventDefault() // console.log(e.currentTarget.classList) e.currentTarget.classList.toggle("fa-times"); if (e.currentTarget.classList.contains("fa-times")) { // document.querySelector(".answer").style.display="flex" } else { document.querySelector(".answer").style.display = "none" } }); }); <div class="question-container"> <div class="question"> <h2>Do You Like fruits?</h2> <div class="questionIcn"> <span class="fas fa-check icn"></span> </div> </div> </div> <div class="question-container"> <div class="question"> <h2>Do You Like vegetable?</h2> <div class="questionIcn"> <span class="fas fa-check icn"></span> </div> </div> </div> <div class="question-container"> <div class="question"> <h2>Do you like gaming?</h2> <div class="questionIcn"> <span class="fas fa-check"></span> </div> </div> </div> </div>No conozco ningún otro lenguaje como jquery. quiero hacer esto usando js simple porque soy un principiante y es mi proyecto.
Agregue el archivo jQuery JS a su página. y use el siguiente código.
Espero que este código solucione su problema.
const icn = document.querySelectorAll("span"); $(document).on("click", "span.fas", function(e){ e.preventDefault(); $("span.fas").removeClass("fa-times"); $(e.target).toggleClass("fa-times"); if ($(e.target).hasClass("fa-times")) { // document.querySelector(".answer").style.display="flex" } else { $(".answer").hide(); } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/> <div class="question-container"> <div class="question"> <h2>Do You Like fruits?</h2> <div class="questionIcn"> <span class="fas fa-check icn"></span> </div> </div> </div> <div class="question-container"> <div class="question"> <h2>Do You Like vegetable?</h2> <div class="questionIcn"> <span class="fas fa-check icn"></span> </div> </div> </div> <div class="question-container"> <div class="question"> <h2>Do you like gaming?</h2> <div class="questionIcn"> <span class="fas fa-check"></span> </div> </div> </div> </div>Envuelvo el código HTML con <div class='wrapper'> debido a la delegación de eventos que es más efectiva que antes.
El siguiente código funcionará según lo previsto.
const $wrapper= document.querySelector(".wrapper"); $wrapper.addEventListener("click", (e) => { const $selectedIcn = e.target.closest(".icn"); if (!$selectedIcn) return; $selectedIcn.classList.toggle("fa-times"); $selectedIcn.classList.toggle("fa-plus"); const questionContainers = document.querySelectorAll(".question-container"); [...questionContainers].map((questionContainer) => { const $icn = questionContainer.firstElementChild.lastElementChild.firstElementChild; if ($icn !== $selectedIcn) { $icn.classList.remove("fa-times"); $icn.classList.add("fa-plus"); } }); }); <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" /> <div class='wrapper'> <div class="question-container"> <div class="question"> <h2>Do You Like fruits?</h2> <div class="questionIcn"> <span class="fas fa-plus icn"></span> </div> </div> </div> <div class="question-container"> <div class="question"> <h2>Do You Like vegetable?</h2> <div class="questionIcn"> <span class="fas fa-plus icn"></span> </div> </div> </div> <div class="question-container"> <div class="question"> <h2>Do you like gaming?</h2> <div class="questionIcn"> <span class="fas fa-plus icn"></span> </div> </div> </div> </div>