Question

我正在使用JQuery模板从JSON数据源渲染大量表。

表格呈现后，我附加了一个Jquery“悬停”事件处理程序（通过表CSS类）来突出显示表列。

悬停事件有效，但影响同一CSS类的所有渲染表 - 所以如果我将鼠标悬停在表1的第2列上，则所有表格的第2列也会突出显示。

我更不希望为每个表附加一个单独的ID - 没有别的东西需要它。

我做了一些谷歌搜索，在悬停事件处理程序中使用JQuery“nearest（）”似乎很有希望，但我无法弄清楚正确的用法:(

非常感谢任何帮助。

$(document).ready(function() {
    drawRows();
    setColumnHover();
});

function drawRows() {
    var jsonData = jQuery.parseJSON(getJsonString());
    $("#tableTemplate").tmpl(jsonData).appendTo("#funnelBody");
    }

function setColumnHover() {
   /* Ref: http://www.local-guru.net/blog/2010/10/29/table-column-highlighting-with-jquery */
    $(".statsTable td").hover(
        function() {
            var idx = $(this).parent().children('td,th').index($(this)) + 1;
            if (idx > 1) {
                $('td:nth-child(' + idx + ')').addClass('hover');
                $('th:nth-child(' + idx + ')').addClass('hover');
            }
        }
        ,
        function() {
            var idx = $(this).parent().children('td,th').index($(this)) + 1;
            if (idx > 1) {
                $('td:nth-child(' + idx + ')').removeClass('hover');
                $('th:nth-child(' + idx + ')').removeClass('hover');
            }
        }
    );
}

///////////// Rendered HTML
<table class="statsTable">
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

Answer 1

给出一些其他类以及statsTable这样的东西。

///////////// Rendered HTML
<table class="statsTable hoverClass">
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

然后将此类用作选择器

$(".hoverClass td")

Answer 2

只需要专注于通过“this”而不是名称来分配类。以下应该可以解决问题。

$(".statsTable td").hover(
    function() {     
        $(this).addClass('hover');
    },
    function() {
        $(this).removeClass('hover');
    }
);

使用Jquery模板呈现的元素都受同一事件处理程序的影响

2 个答案: