Блог

Главная - Вопросы по программированию - Получить индекс дочернего элемента, на который был нажат

Получить индекс дочернего элемента, на который был нажат

#javascript #jquery

Вопрос:

Я хочу прикрепить прослушиватель событий ко всем классам img-фреймов, и я получу, какой элемент (по индексу) внутри родительского был нажат:

 $('.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>

Поэтому, если был нажат первый, я хочу 0 и …

Как я могу это сделать?

Ответ №1:

Вы хотите делегировать событие, чтобы сэкономить на обработчиках:

 $('.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>

Ответ №2:

Я думаю, это должно вам помочь 🙂

 $('.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>
Метки: ,