Skip to main content
Dar formato a la pregunta
Origen Enlace
Javi fer2
  • 6.9k
  • 7
  • 13
  • 24

soySoy nueva en esto y deseo obtener algo de ayuda. Hice un accordion menú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 JavascriptJavascript 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"class="imagen_menu_web" y los item que voy oprimiendo son: id="imagen-menuu#" id="imagen-menuu#".

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#"

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#".

Origen Enlace

Comó hacer para que mi código Javascript no sea extenso?

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>