Question

我已经从Data Tables Plugin中编辑了这段代码，使得点击后可以点击并打开另一个tr，其中包含来自点击的tr的详细信息。这段代码是用于打开和关闭的事件监听器。当＆＃34;细节＆＃34;打开img应该是images / details_close.png并关闭它们img应该是images / details_open.png并且在点击时打开和关闭时会发生交换。发生的事情是当它打开或关闭时没有交换我仍然只得到＆＃34; details_open.png＆＃34;。如果我没有正确选择img标签或者发生了什么事，我就不会知道。

项目链接： http://www2.kent.k12.wa.us/ksd/it/www/mobile/elementary.html

$('#example tbody').on('click', 'td', function (e) {
        var myImage = $(this).find("img");
        var nTr = $(this).parents('tr')[0];
        if ( oTable.fnIsOpen(nTr) )
        {
        /* This row is already open - close it */
        myImage.src = "images/details_open.png";
        oTable.fnClose( nTr );
        }
        else
        {
        /* Open this row */
        myImage.src = "images/details_close.png";
        oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
        }
    } );

Answer 1

两部分：

首先，修改您的图像选择器，因为您在TD内，而不是TR

var myImage = $(this).parent().find("img");

其次，使用attr（）方法更改src属性的值而不是直接作用于src

myImage.attr("src","images/details_open.png");

Answer 2

试试这个：

var myImage = $(this).parent().find("img");

根据您的描述，您正尝试在TR中的某处交换图像，但您的点击处理程序位于所有TD上。为了在TR中搜索图像，您需要在TD的父级内执行find（）。

Answer 3

所以这就是我最后加入你们的答案并进行一些编辑，这就解决了这个问题。

$('#example tbody').on('click', 'tr', function (e) {
        var myImage = $(this).find("#more");
            var nTr = $(this).closest('tr')[0];
            if ( oTable.fnIsOpen(nTr) )
            {
            /* This row is already open - close it */
            myImage.attr("src","images/details_open.png");
            oTable.fnClose( nTr );
            }
            else
            {
            /* Open this row */
            myImage.attr("src","images/details_close.png");
            oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
            }
        } );

单击图像交换

3 个答案: