1

Soy nueva en esto y deseo obtener algo de ayuda. Hice un accordion menú y quiero que cuando oprima un item del menú, me cambie una foto por otra. Lo hice de manera que ya hay una foto predefinida y cuando oprimo un item por primera vez, me muestra otra foto, cuando la oprimo por segunda vez, me muestra la foto que ya estaba predefinida.

Cuando oprimo el otro item es igual; si oprimo una vez muestra otra foto y a la segunda vez me devuelve la foto predefinida........ quiero hacer esto varias veces porque son varios item y cada uno quiero que muestre fotos diferentes.

En mi código Javascript funciona de manera que hago todo el proceso independiente y quedaría muy extenso. Cómo podría hacerlo más corto?

La imagen predefinida es class="imagen_menu_web" y los item que voy oprimiendo son id="imagen-menuu#".

Les agradezco su colaboración. Gracias!

var botonElement = document.getElementById("imagen-menuu0");
  var pElement = document.getElementById("text2");
  var contador = 0;
  botonElement.onclick = function(event) {
    contador++;
    var acor = document.querySelector(".imagen_menu_web");
    var Img = document.querySelector("#imagen-menuu0");


  if (contador == 1) {
        acor.src = 'imagenes/dulce.jpg';
    } else if (contador == 2) {
        acor.src = 'imagenes/menu_web.png';
        contador = 0;
    }

  }
//
var botonElement = document.getElementById("imagen-menuu1");
botonElement.onclick = function(event) {
    contador++;
    var acor = document.querySelector(".imagen_menu_web");
    var Img = document.querySelector("#imagen-menuu1");

if (contador == 1) {
    acor.src = 'imagenes/dulce2.jpg';
} else if (contador == 2) {
    acor.src = 'imagenes/menu_web.png';
    contador = 0;
}

}
<div class="img_menu_box">
        <img class="imagen_menu_web" src="imagenes/menu_web.png" alt="Menú">
      </div>

      <div class="accordion-menu">

        <div class="accor" id="imagen-menuu0">
          <div class="th5">
            <h5>MMMMM</h5>
          </div>
          <div class="icon"></div>
        </div>
        <div class="panel">
          <p class="text2">
           RRRRR
          </p>
        </div>

        <div class="accor" id="imagen-menuu1">
          <div class="th5">
            <h5>MMMMM</h5>
          </div>
          <div class="icon"></div>
        </div>
        <div class="panel">
          <p>
            RRRRRR
          </p>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Javi fer2
  • 5,210
  • 6
  • 10
  • 24
Paula Alejandra Rodrguez Romn
  • 13
  • 2

1 Answers1

1

Lo primero decir que tu código ahora mismo no es lo que se conoce como accordion pero entiendo que tu idea es que cambie una imagen (la de clase imagen_menu_web) en función de en qué div hagas click. Si el comportamiento deseado es otro me dices y lo vemos.

Otra cosa, aunque tengas referenciada la librería jQuery en tu ejemplo voy a dar por hecho que no la estás usando (y no tienes intención de momento de hacerlo). Usarla sería una buena forma de reducir código (ya que te evita todos los document.getElementBy...) pero bueno, el principal problema de tu código es que no estás usando el potencial de los arrays y los bucles, además de que estás reasignando la variable botonElement (la tienes declarada dos veces con distinto valor).

Mirando la estructura del HTML, si te fijas, tienes varios div con la clase accor asignados. Podrías obtenerlos todos con document.getElementByClassName('accor') y utilizar el array que te devuelve para asignar los eventos click. Además, dado que las imágenes son simples strings con la ruta donde se encuentran puedes guardarlas también en un array y asignar el src de la imagen a medida que vas recorriendo el array.

///Obtenemos todos los div con clase 'accor'
const accorDivs = document.getElementsByClassName("accor");

//Declaramos un array con todas las src de las imágenes a utilizar
const images = ['https://ps.w.org/candy-social-widget/assets/icon-128x128.png?rev=1883621', 'https://upload.wikimedia.org/wikipedia/commons/7/7e/Candy_stick_icon.png']

//Obtenemos el elemento <img> cuyo src vamos a cambiar en cada click
const acor = document.querySelector(".imagen_menu_web");

//Recorremos el array de divs y a cada uno le asignamos el evento click y le asignamos
//la imagen de la posición i que corresponda.
for (let i = 0; i < accorDivs.length; i++) {
  accorDivs[i].addEventListener("click", function() {
acor.src=images[i];
  });
}    
   
<div class="img_menu_box">
        <img class="imagen_menu_web" src="https://static.thenounproject.com/png/98096-200.png" alt="Menú">
      </div>

      <div class="accordion-menu">

        <div class="accor" id="imagen-menuu0">
          <div class="th5">
            <h5>MMMMM</h5>
          </div>
          <div class="icon"></div>
        </div>
        <div class="panel">
          <p class="text2">
           RRRRR
          </p>
        </div>

        <div class="accor" id="imagen-menuu1">
          <div class="th5">
            <h5>MMMMM</h5>
          </div>
          <div class="icon"></div>
        </div>
        <div class="panel">
          <p>
            RRRRRR
          </p>
        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Si te fijas he usado const para declarar las variables ya que estas no van a modificarse y let para el bucle. Te recomiendo que leas esta pregunta con más info.

Aún se podría reducir más el código (utilizando funciones flecha, array.prototypes, etc. pero ahora lo más importante es entender el concepto de arrays y bucles.

Kiko_L
  • 6,455
  • 1
  • 11
  • 25