Quiero adjuntar un detector de eventos a todas las clases de marcos img y obtengo qué elemento (por índice) dentro del padre se ha hecho clic:
$('.img-frame').each((i, img) => { $(img).on('click', pictureClicked); }); function pictureClicked(e) { console.log(e.currentTarget) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="three-image-container"> <img class="img-frame" src="blob:https://localhost:4000/daf31145-292d-462c-bc94-aad0610b2972"> <img class="img-frame" src="blob:https://localhost:4000/8e4a143e-f9f0-47ec-a361-4e571bb49d1a"> <img class="img-frame" src="blob:https://localhost:4000/c8236624-571d-4386-9225-e14e7fac9560"> </div>Entonces, si se ha hecho clic en el primero, quiero 0 y ...
¿Cómo puedo hacer esto?
Desea delegar el evento para guardar en los controladores:
$('.three-image-container').on('click', 'img', pictureClicked); function pictureClicked(e) { console.log($(e.target).index()) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="three-image-container"> <img class="img-frame" src="blob:https://localhost:4000/daf31145-292d-462c-bc94-aad0610b2972"> <img class="img-frame" src="blob:https://localhost:4000/8e4a143e-f9f0-47ec-a361-4e571bb49d1a"> <img class="img-frame" src="blob:https://localhost:4000/c8236624-571d-4386-9225-e14e7fac9560"> </div>Creo que debería ayudarte :)
$('.img-frame').each((i, img) => { $(img).on('click', pictureClicked); }); function pictureClicked(e) { console.log($(e.currentTarget).index()) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="three-image-container"> <img class="img-frame" src="blob:https://localhost:4000/daf31145-292d-462c-bc94-aad0610b2972"> <img class="img-frame" src="blob:https://localhost:4000/8e4a143e-f9f0-47ec-a361-4e571bb49d1a"> <img class="img-frame" src="blob:https://localhost:4000/c8236624-571d-4386-9225-e14e7fac9560"> </div>