1

Cordial saludo. Espero me puedan ayudar con lo siguiente, tengo 3 botones y cuando selecciono uno de ellos muestro el respectivo contenido. resultado Lo he conseguido utilizando un switch case, obteniendo y comparando el id del botón seleccionado, pero no creo que se la manera más optima de hacerlo, quisiera que esto sea más dinámico ya que estoy pensando si en el futuro desean añadir más botones, entonces tendría problemas con le código que tengo actualmente, les dejo el código de lo que implementado.

const buttons = document.querySelectorAll(".go-content");
const contents = document.querySelectorAll(".content-item");
const contentsArray = Array.from(contents);
//Obtengo el botón selccionado y le quito la clase d-none al div donde tengo el contenido respectivo
const getContent = function (event) {
  const buttonSelect = this.getAttribute("id");
  switch (buttonSelect) {
    case "button-1":
      contentsArray[0].classList.toggle("d-none");
      contentsArray[1].classList.add("d-none");
      contentsArray[2].classList.add("d-none");
      break;
    case "button-2":
      contentsArray[0].classList.add("d-none");
      contentsArray[1].classList.toggle("d-none");
      contentsArray[2].classList.add("d-none");
      break;
    case "button-3":
      contentsArray[0].classList.add("d-none");
      contentsArray[1].classList.add("d-none");
      contentsArray[2].classList.toggle("d-none");
      break;
    default:
      break;
  }
};
//Agrego el evento a cada botón.
buttons.forEach((button) => {
  button.addEventListener("click", getContent);
});
<div class="container">
        <h1 class="my-4">Mostrar contenido de acuerdo al botón que se le da click</h1>
        <div class="row text-center my-5">
            <div class="col-4">
                <button type="button" class="btn btn-primary btn-lg go-content" id="button-1">Button 1</button>
            </div>
            <div class="col-4">
                <button type="button" class="btn btn-primary btn-lg go-content" id="button-2">Button 2</button>
            </div>
            <div class="col-4">
                <button type="button" class="btn btn-primary btn-lg go-content" id="button-3">Button 3</button>
            </div>
        </div>
        <div class="d-none shadow p-3 mb-5 bg-white rounded my-6 content-item" id="contenido-1">
            <h2>Este es el contenido que se debe mostrar al darle clic al botón 1</h2>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has.</span>
        </div>
        <div class="d-none shadow p-3 mb-5 bg-white rounded my-6 content-item" id="contenido-2">
            <h2>Este es el contenido que se debe mostrar al darle clic al botón 2</h2>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been.</span>
        </div>
        <div class="d-none shadow p-3 mb-5 bg-white rounded my-6 content-item" id="contenido-3">
            <h2>Este es el contenido que se debe mostrar al darle clic al botón 3</h2>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley.</span>
        </div>
    </div>

1
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    Commented el 7 ago. 2022 a las 8:55

1 respuesta 1

0

Se puede hacer dinámico de la siguiente manera usando siempre el formato "button-<número>" para el id de los botones y "contenido-<número>" para el id del contenido.

const buttons = document.querySelectorAll(".go-content");
const contents = document.querySelectorAll(".content-item");

const getContent = function(event) {
  const buttonSelected = this;
  
  // Obtener el id del boton, dividir usando el separador -
  // y devolver el índice 1 (el número)
  const selectedId = buttonSelected.getAttribute("id").split('-')[1];
  
  // Ocultar todo el contenido
  contents.forEach((tabContent => {
    tabContent.classList.add("d-none");
  }));
  
  // Obtener el contenido usando el número del botón
  content = document.querySelector("#contenido-" + selectedId);
  // Remover clase d-none para mostrar el contenido.
  content.classList.remove("d-none");
};

// Agrego el evento a cada botón.
buttons.forEach((button) => {
  button.addEventListener("click", getContent);
});
1
  • Muchas gracias Cristian F, me ha funcionado de maravilla, gracias por compartir tu conocimiento. Commented el 8 ago. 2022 a las 0:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.