0
367
VisualizaçõesCómo ocultar solo el botón en el que se hizo clic que pertenece a la misma clase de botones usando Vanilla JS HTML CSS
Estoy atascado en una situación en la que estoy representando un data.json en HTML usando JS. Todo está funcionando bien. Los datos Json se procesan en html usando un bucle que da como resultado múltiples objetos que tienen la misma clase.
Debido a esto, cada botón que creé pertenece a la misma clase en bucle. Ahora la pregunta; Quiero ocultar solo el botón específico en el que se hace clic y no todos los botones de la clase.
var X = document.getElementsByClassName("buttons"); function HideClickedButton() { for (let x of X) { if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } } for (const button of X) { button.addEventListener('click', HideClickedButton); } <button class="buttons">Test</button> <button class="buttons">Test</button> <button class="buttons">Test</button> <button class="buttons">Test</button>el código anterior oculta todos los botones de la misma clase.
y si usa solo document.querySelector(".buttons").style.display = "none"
Luego, siempre oculta el primer botón sin importar qué botón se presione.
Parte editada:
<div onclick="addToCart(${product.price})"> <button class="b1" onclick="hideAddButton(this)" type="button">ADD</button> </div> <div onclick="addToCartRemove(${product.price})"> <button class="b2 hidden" onclick="showRemoveButton(this)" type="button">Remove</button> </div> Asi que. mi código es algo como esto en JS, que básicamente es una lista de representación de JSON. Después del renderizado, los botones de totales son 12. En un grupo de 6 (ver imagen). Ahora, no quiero mostrar el botón Eliminar inicialmente. Solo se mostrará cuando se haga clic en el botón AÑADIR correspondiente. Cuando se hace clic en el botón AÑADIR, se ocultará y el botón Eliminar lo ocupará mientras que los otros botones AÑADIR permanecen igual. Por favor, hágamelo saber si usted entiende. 
3 Respostas
Responde à pergunta0
Adjunte un oyente a cada botón y hide el elemento en el que se hizo clic ...
const buttons = document.querySelectorAll('.button'); buttons.forEach(button => { addEventListener('click', handleClick) }); function handleClick(e) { e.target.classList.add('hide'); } .hide { display: none; } <button class="button">one</button> <button class="button">two</button> <button class="button">three</button> <button class="button">four</button> <button class="button">five</button> ... o envuelva sus botones en un contenedor , use la delegación de eventos y solo adjunte un oyente a ese contenedor (esto capturará todos los eventos de sus elementos secundarios a medida que "burbujean" en el DOM). Verifique que el elemento en el que se hizo clic tenga clase .button y luego ocúltelo.
const buttons = document.querySelector('.buttons'); buttons.addEventListener('click', handleClick); function handleClick(e) { if (e.target.matches('.button')) { e.target.classList.add('hide'); } } .hide { display: none; } <div class="buttons"> <button class="button">one</button> <button class="button">two</button> <button class="button">three</button> <button class="button">four</button> <button class="button">five</button> </div>0
Puede hacer esto usando onclick="yourfunction(this)" , consulte el fragmento a continuación.
Otra solución es usar un detector de eventos.
function HideClickedButton(x) { x.style.display = "none"; } <div> <button onclick="HideClickedButton(this)" class="buttons">Button 1</button> <button onclick="HideClickedButton(this)" class="buttons">Button 2</button> <button onclick="HideClickedButton(this)" class="buttons">Button 3</button> <button onclick="HideClickedButton(this)" class="buttons">Button 4</button> </div>EDITAR: siguiendo su pregunta en los comentarios, aquí se explica cómo alternar la visualización del botón 1 al hacer clic en el botón 8, y viceversa. No importa de qué clase sean los botones porque es el atributo onclick el que activa la función, no su clase.
function HideClickedButton(x) { var parent = x.parentNode; var index = [].indexOf.call(parent.children, x); //if clicked element is index 0 in parent element's children (button 1) if(index==0){ //show element index 7 (button 8) parent.children[7].style.display = "inline-block"; } //else if clicked element is index 7 in parent element's children (button 8) else if(index==7){ //hide or show element index 0 (button 1) parent.children[0].style.display = "inline-block"; } //we hide clicked button x.style.display = "none"; } <div> <button onclick="HideClickedButton(this)" class="buttons">Button 1</button> <button onclick="HideClickedButton(this)" class="buttons">Button 2</button> <button onclick="HideClickedButton(this)" class="buttons">Button 3</button> <button onclick="HideClickedButton(this)" class="buttons">Button 4</button> <button onclick="HideClickedButton(this)" class="buttons">Button 5</button> <button onclick="HideClickedButton(this)" class="buttons">Button 6</button> <button onclick="HideClickedButton(this)" class="buttons">Button 7</button> <button onclick="HideClickedButton(this)" class="buttons_other_class">Button 8</button> </div>0
Puede agregar un detector de eventos para el clic de su botón.
var X = document.getElementsByClassName("buttons"); X.forEach(function (element) { element.addEventListener("click", function () { this.style.display = "none"; }) })