Question

我正在尝试突出显示悬停行，这对我来说很合适。同时，我想在点击时突出显示悬停的行。以下是我的代码：

        $(".simplehighlight").hover(function() {
            $(this).children().css('backgroundColor', '#ffdc87');
        },
        function() {
            $(this).children().css('backgroundColor', '#fff');
        });

如果我将点击事件与上述相同，则无效。

        $(".simplehighlight").click(function() {
            $(this).children().css('backgroundColor', '#ffdc87');
        },
        function() {
            $(this).children().css('backgroundColor', '#fff');
        });

有关如何实现这一目标的任何建议吗？

Answer 1

更新：这是一个使用CSS类的更好的版本：

$(".simplehighlight").click(function() {
    $(this).toggleClass('clicked');
    // comment the following line if you don't want to dehighlight other rows
    $(this).siblings().removeClass('clicked');
});

$(".simplehighlight").hover(function() {
    $(this).children().css('backgroundColor', '#ffdc87');
}, function() {
    $(this).children().css('backgroundColor', '');
});

CSS的位置是：

.simplehighlight {
    background-color: #fff;
}

.clicked {
    background-color: #ffdc87;
}

DEMO

旧答案： 工作但不必要的复杂。

click只接受一次回调，而不是两次。您可以使用data检查是否单击了行：

$(".simplehighlight").click(function() {
    var clicked = $(this).data('clicked');
    $(this).data('clicked', !clicked);
    if(clicked) {
        $(this).children().css('backgroundColor', '#fff');
    }
    else {
        $(this).children().css('backgroundColor', '#ffdc87');
    }
});

然后，为了不更改mouseleave上的来电者，请检查clicked值：

$(".simplehighlight").hover(function() {
    $(this).children().css('backgroundColor', '#ffdc87');
},
function() {
    if(!$(this).data('clicked')) {
        $(this).children().css('backgroundColor', '#fff');
    }
});

Working DEMO

Answer 2

如果您想在点击另一行后取消突出显示每一行，您可以执行以下操作：

$('tr').click(function(){
    $(this).children().css('backgroundColor', '#ffdc87');
    $(this).siblings().children().css('backgroundColor', '#ffffff');
});

Demo

使用tbody：

$('tbody tr').click(function(){
    $(this).children().css('backgroundColor', '#ffdc87');
    $(this).siblings().children().css('backgroundColor', '#ffffff');
});

Demo

Answer 3

我认为这是有效的

$(".simplehighlight").click(function() {
            $(this).children().css('backgroundColor', '#ffdc87');
        },
        function() {
            $(this).children().css('backgroundColor', '#fff');
        });

更改为

$(".simplehighlight").click(function() {
            $(this).children().css('backgroundColor', '#ffdc87');

        });

Answer 4

与.hover（）不同.click（）只需要一个回调函数..请参阅.toggle（）...或者您可以使用css类来跟踪状态 - 请参阅以下示例：http://www.elated.com/articles/jquery-manipulating-element-classes/

Answer 5

我会建议这种方法：

CSS：

.highlight { background-color: #ffdc87 }

JS：

$('tr').click(function(){
    $('tr').children().removeClass('highlight')
    $(this).children().addClass('highlight');
});

演示：http://jsfiddle.net/W3sZS/1/

jquery行悬停并单击事件

5 个答案: