На элементы, отображаемые с помощью шаблонов Jquery, влияет тот же обработчик событий - PullRequest
Новая
       5

На элементы, отображаемые с помощью шаблонов Jquery, влияет тот же обработчик событий

0 голосов
/ 30 июня 2011

Я использую шаблоны JQuery для рендеринга ряда таблиц из источника данных JSON.

После рендеринга таблиц я присоединяю обработчик событий "hover" Jquery (с помощью класса CSS таблицы), чтобы выделитьстолбцы таблицы.

Событие наведения работает, но влияет на все отображаемые таблицы одного и того же класса CSS - поэтому, если я наведу курсор на столбец 2 таблицы 1, столбец 2 ВСЕХ моих таблиц также будет выделен.

Я бы предпочел не прикреплять индивидуальный идентификатор для каждой таблицы - больше ничего не понадобилось бы.

Я сделал несколько поисков в Google, и использование JQuery "closest ()" в обработчике событий при наведении курсора кажется многообещающим, но я не могу понять правильное использование :(

Любая помощь будет очень ценится. 

$(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>

Ответы [ 2 ]

0 голосов
/ 30 июня 2011

Просто нужно сосредоточиться на присвоении класса «этим», а не по имени.Следующее должно сделать трюк. 

$(".statsTable td").hover(
    function() {     
        $(this).addClass('hover');
    },
    function() {
        $(this).removeClass('hover');
    }
);
0 голосов
/ 30 июня 2011

Дайте некоторому другому классу вместе с statsTable что-то вроде этого. 

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

, а затем используйте этот класс в качестве селектора 

$(".hoverClass td")
...