He adjuntado 2 de mis divs a continuación. Cuando se hace clic en el ícono dentro del corazón, si el nombre de la clase está lejos, entonces debería cambiar de lejos a fas. Pero si el nombre de la clase se ha cambiado a fas, debería volver a cambiar a far. No estoy seguro de cómo hacer esto porque tengo muchos divs.
<div class="cont"> <h2>A header</h2> <div class="heart"> <i onclick="like(example)" class="fas fa-heart"></i> </div> </div> <div class="cont"> <h2>A header#2</h2> <div class="heart"> <i onclick="like1()" class="fas fa-heart"></i> </div> </div>Este es el javascript que tengo actualmente.
function like(example){ if(example.classList=="far fa-heart"){ example.classList.toggle="fas fa-heart"; } else{ example.classList.toggle="far fa-heart"; } }Quiero que esto esté en solo 1 función sin hacer una variable para todas las etiquetas en javascript. Todavía estoy aprendiendo... ¡Gracias por tu ayuda!
No puedo encontrar un buen objetivo duplicado para esto. Básicamente, puede click en gancho en un elemento principal que contiene todos estos ( body si nada más) y solo tomar medidas si el clic pasó a través del elemento fa-heart cuando burbujea:
theContainer.addEventListener("click", function(event) { // Did the click pass through an `.fa-heart` element? const heart = event.target.closest(".fa-heart"); if (heart && this.contains(heart)) { // Yes, and that element is inside this container; toggle it heart.classList.toggle("far"); heart.classList.toggle("fas"); } }); Ver closest , contains y toggle para obtener más detalles.
Ejemplo en vivo:
const theContainer = document.body; theContainer.addEventListener("click", function(event) { // Did the click pass through an `.fa-heart` element? const heart = event.target.closest(".fa-heart"); if (heart && this.contains(heart)) { // Yes, and that element is inside this container; toggle it heart.classList.toggle("far"); heart.classList.toggle("fas"); } }); .fa-heart { display: inline-block; width: 20px; color: white; } .fas { background-color: red; } .fas::after { content: 'fas'; } .far { background-color: green; } .far::after { content: 'far'; } <div class="cont"> <h2>A header</h2> <div class="heart"> <i class="fas fa-heart"></i> </div> </div> <div class="cont"> <h2>A header#2</h2> <div class="heart"> <i class="fas fa-heart"></i> </div> </div>Puede usar una función que acepte un elemento HTML como parámetro y alterne las clases.
function like1(element) { element.classList.toggle("fas"); element.classList.toggle("far"); } .fas { color: green; } .far { color: red; } <div class="cont"> <h2>A header</h2> <div class="heart"> <i onclick="like1(this)" class="fas fa-heart">Like</i> </div> </div> <div class="cont"> <h2>A header#2</h2> <div class="heart"> <i onclick="like1(this)" class="fas fa-heart">Like</i> </div> </div>Edité la respuesta para agregar el HTML e importar fontawesome, ya que mi primera respuesta se realizó en mi teléfono.
function toggleHearts() { document.querySelectorAll(".heart") .forEach(elm => elm.addEventListener("click", (e) => { e.target.classList.toggle("far"); e.target.classList.toggle("fas"); })); } toggleHearts() <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="container"> <h2>A header</h2> <div class="heart"> <i class="fas fa-heart"></i> </div> </div> <div class="container"> <h2>A header#2</h2> <div class="heart"> <i class="fas fa-heart"></i> </div> </div>