Как определить по какому элементу был клик?

171

18 декабря 2020, 19:20

Есть много элементов списка с одним и тем же id='report-started'. При нажатии на который я в js должен получить его data-progress.
Как разграничить эти элементы списка и узнать на какой я нажал?

Я понимаю, что можно каждому id='report-started' добавить уникальное значение типа id='report-started-123' и id='report-started-234' и т.д., но не понимаю как тогда определять по какому именно элементу был клик?

В примере клик срабатывает только на первом элементе.
Спасибо.

$(document).ready(function () { 
  $('#report-started').on('click', function() { 
    var progress = $(this).attr('data-progress'); 
    console.log(progress); 
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
  <li data-progress="[1, 2]" id="report-started"> 
    Открыть 
  </li> 
   
  <li data-progress="[3, 4]" id="report-started"> 
    Открыть 
  </li> 
   
  <li data-progress="[5, 6]" id="report-started"> 
    Открыть 
  </li> 
</ul>

Answer 1

Вместо id в данном случае нужно использовать class:

$(document).ready(function() { 
  $('.report-started').on('click', function() { 
    var progress = $(this).attr('data-progress'); 
    console.log(progress); 
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
  <li data-progress="[1, 2]" class="report-started"> 
    Открыть 
  </li> 
 
  <li data-progress="[3, 4]" class="report-started"> 
    Открыть 
  </li> 
 
  <li data-progress="[5, 6]" class="report-started"> 
    Открыть 
  </li> 
</ul>

Однако если очень хочется использовать именно одинаковые id несмотря на то, что это может привести к другим проблемам, можно немного изменить селектор:

$(document).ready(function() { 
  $('li#report-started').on('click', function() { 
    var progress = $(this).attr('data-progress'); 
    console.log(progress); 
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<ul> 
  <li data-progress="[1, 2]" id="report-started"> 
    Открыть 
  </li> 
 
  <li data-progress="[3, 4]" id="report-started"> 
    Открыть 
  </li> 
 
  <li data-progress="[5, 6]" id="report-started"> 
    Открыть 
  </li> 
</ul>

Answer 2

document.addEventListener('click', function(e){ 
  console.log('target', e.target); 
  console.log('currentTarget', e.currentTarget); 
  console.log('evt', e); 
  message.innerHTML = e.target.tagName; 
});

Можешь почитать про всплытие событий, чтоб такие темы были понятнее.

Далее, определив таргет нажатия, можно просто через css селектор взять родителя, или чайлда.