如何为dataTable中的不同操作选择图像？

Question

我制作了一个dataTable，并在每一行中包含数据项和两个图标图像，一个图像用于将其标记为收藏，另一个图标用于通过单击报告未使用的项目。因此，有两种不同的操作取决于所单击的图标。标记为收藏的jQuery代码

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

但是这同时适用于两个图标，如何区分它们？

Answer 1

您仅通过使用img标签来选择它们两者。您需要添加一个类名来区分动作。

还有一个自定义的数据属性，例如data-id属性，它的值我们以后可以用来标识目标项目（数据库ID），可以在用ajax（like here）填充Datatable（）时添加该值。用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');
                     }
});

Answer 2

我在阅读https://api.jquery.com/multiple-selector/之后找到了解决方案为图像指定不同的类名称，然后就可以选择它们。对于“收藏夹”图标和“审查”图标，则可以相应地选择它们。

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

仅此而已。