1

Buenas, tengo esto en mi código Jquery:

    $("#borrarImagen0").click(function() {
      editarImagen(0);
    });

    $("#borrarImagen1").click(function() {
     editarImagen(1);
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Quiero hacer algo como:

for(i = 0; i < 2; i++) { 
  $("#borrarImagen"+i).click(function() {
    editarImagen(i);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Pero no esta funcionando, la verdad no entiendo bien el porque, porque es un bucle simple, pero aun así no funciona.

El problema es que tengo otro bucle de estos, pero donde son 15 elementos y si tengo que hacer alguna modificación es muy engorroso cambiarlo en todos lados.

Busque por todos lados, pero no encontré la manera de solucionarlo.

5
  • Hola Fedo, te recomiendo mirarte alguna guia y mirar los bucles. Espero que te sirva y suerte [1]: librosweb.es/libro/fundamentos_jquery [2]: librosweb.es/libro/fundamentos_jquery/capitulo_2/bucles.html
    – Edu3D
    Commented el 11 sept. 2017 a las 12:29
  • 1
    Tienes la variable i declarada?
    – Flowen
    Commented el 11 sept. 2017 a las 12:36
  • Y porque no te funciona?, yo no veo el error en ningún lugar
    – ESCM
    Commented el 11 sept. 2017 a las 12:41
  • 1
    Fedo, que no funciona?. No se lanza el evento clic? Intenta poner un console.log(i) y verifica si se esta ejecutando.
    – Einer
    Commented el 11 sept. 2017 a las 12:43
  • La variable i esta definida, cuando hago i = 0 al principio. Commented el 11 sept. 2017 a las 13:31

3 respuestas 3

2

No sé cómo has declarado la variable i del bucle for, pero posiblemente el problema venga de ahí: el bucle itera sobre i desde 0 hasta 2. Cuando i vale dos, el bucle se para.

Entonces viene el posible problema: Cualquier click hace que se ejecute editarImagen(i), pero i vale 2 para todos los elementos si se ha declarado como var o si es una variable global (no declarada):

for (var i=0;i<4;i++) {
  $('#b'+i).click(function() {
    console.log('La variable i vale ' +i);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b0">Click</button>
<button id="b1">Click</button>
<button id="b2">Click</button>
<button id="b3">Click</button>

Este problema se soluciona usando let para declarar la variable, porque para cada iteración se crea de nuevo y, por tanto, para cada llamada a la función editarImagen, tendrías una variable con valor distinto.

for (let i=0;i<4;i++) {
  $('#b'+i).click(function() {
    console.log('La variable i vale ' +i);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b0">Click</button>
<button id="b1">Click</button>
<button id="b2">Click</button>
<button id="b3">Click</button>

1
  • Invencible!, que genio!!!! me salvaste la vida, sos un grande!!! anda perfecto! Commented el 11 sept. 2017 a las 13:38
1

En lugar de andar con for, usa each para asignar la funcion de clicar a todas las imagenes, y luego trabaja con ella con this. Te he colocado una funcion de borrar las imagenes tambien para que veas como funciona.

$(document).ready(asignarfuncion);

function asignarfuncion(){
    $( "img" ).each(function(index) {
        $(this).unbind();
        $(this).click(function(){
            editarImagen(index);
        });
    });
}

function editarImagen(index){
    $("img").eq(index).remove();
    asignarfuncion();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://gloria-project.eu/wp-content/uploads/2012/06/logo-256-transp.png"/>
<hr/>
<img src="https://vignette1.wikia.nocookie.net/fallout/images/a/a0/Internet_Explorer_9_logo.png/revision/latest?cb=20110908011258&path-prefix=es"/>

7
  • El código no está del todo bien. editarImagen() agrega un listener adicional al resto de las imágenes cada vez que das click. puedes comprobar inspeccionando los elementos img en el navegador y ver 2 listeners después de dar click a una imagen :P Commented el 11 sept. 2017 a las 14:16
  • @ArieCwHat ya limpio el click ahora con el unbind. Si eso era lo de menos, la cosa es la idea de usar el each y el this.
    – GDP
    Commented el 11 sept. 2017 a las 14:24
  • @ArieCwHat de todas maneras, no se proque ami no me aparecen dos eventos en chrome... por eso no me habre dado cuenta. Pero tienes razon si.
    – GDP
    Commented el 11 sept. 2017 a las 14:26
  • Creo que tiene un botón actualizar el visor de eventos en chrome, es un poco absurdo que no lo haga en tiempo real :v Commented el 11 sept. 2017 a las 14:31
  • Es muy completo y agrega cosas que no estan buenas, fijate las otras 2 opciones que estan mas claras, a mi me re sirvio y espero que a vos tambien. Commented el 11 sept. 2017 a las 14:56
0

Otra opción con JQuery (y es6) es usar una clase de este modo

<button class="eliminar">Click</button>

Luego seleccionar y usar each() de jquery, de la siguiente manera :

function editarImagen(imagenId) {
  alert('Editando ' + imagenId);
}

$('.eliminaImagen').each((index, element) => $(element).click(() => editarImagen(index)));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="eliminaImagen">Elimina 1</button>
<button class="eliminaImagen">Elimina 2</button>
<button class="eliminaImagen">Elimina 3</button>
<button class="eliminaImagen">Elimina 4</button>

Según las disposición de tus imágenes, quizá necesites corregir algunos indices.

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.