Как выбрать изображения для различных действий в dataTable?

Question

Я создал dataTable, и в каждой строке содержится элемент данных и два изображения значков, одно для пометки элемента как избранного, а другое - для сообщения о неапропортированном элементе, нажав на него. Итак, есть два разных действия в зависимости от того, на какой значок нажали. В jquery код для отметки как любимый

 $(document).ready(function() {
            var table = $('#myTable').DataTable();
             $('#myTable tbody').on( 'click', 'img', function () {
            //mark as favourite
             }

, но это работает с обоими значками, как я могу различить их?

Answer 1

Я нашел решение после прочтения https://api.jquery.com/multiple-selector/ Давая изображениям разные имена классов, вы можете выбрать их.

<img class='fv'>

для избранного значка и

<img class='cs'>

для значка цензуры, затем вы можете выбрать их соответственно.

$('#myTable tbody').on( 'click', 'img.fv', function () {
        //mark as favourite
         }
$('#myTable tbody').on( 'click', 'img.cs', function () {
        //mark as unapropiated
         }

и все.

Answer 2

Вы выбираете их обоих, используя только тег img. Вам нужно добавить имя класса, чтобы различать guish между действиями.

И пользовательский атрибут данных, такой как атрибут data-id, это значение, которое мы могли бы использовать позже, чтобы идентифицировать целевой элемент (идентификатор базы данных) и это может быть добавлено, когда вы заполняете свой Datatable () с помощью ajax ( как здесь ) или php ...

<img src="fav.png" class="fav" data-id="12"><img src="flag.png" class="flag" data-id="13">

И в вашем сценарии:

         $(document).ready(function() {
                    var table = $('#myTable').DataTable();
                     $('#myTable tbody').on( 'click', '.fav', function () {
                    //mark as favourite 
    //to use the ID of that item you need another row identifier for your function 
    var id=$(this).data('id');
                     }
                     $('#myTable tbody').on( 'click', '.flag', function () {
                    //Report that...
    var id=$(this).data('id');
                     }
});