jquery行悬停和单击事件

我想突出显示一行悬停，这对我工作正常。同时，我想突出显示被点击的悬空行。下面是我的代码，直到现在：jquery行悬停和单击事件

 $(".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'); 
     });

有关如何实现此目的的任何建议？

来源

2010-12-17 DG3

会发生什么事，如果你点击另一行？先前点击的行是否应该突出显示？ – 2010-12-17 16:47:25

没有。当前点击的行应该突出显示，并且即使将鼠标悬停在其他行上，当前行也应该高亮显示。 – DG3 2010-12-17 16:50:03

更新：这里是一个更好的版本使用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

来源

2010-12-17 17:02:59

@Felix Kling：我得到了这个工作，但是当其他行被点击时，我可以取消一行吗？ – DG3 2010-12-17 17:24:15

@ user508518：查看我更新的答案。使用CSS类是一个更好的方法。只要注释掉'（$ this）.siblings（）'这行'如果你**不想**使其他行不重要。 – 2010-12-17 18:07:45

@Felix King：尽管它在您的演示中有效，但点击方式对我来说不起作用。 – DG3 2010-12-17 18:23:02

我不要认为这有效

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

变化

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

     });

来源

2010-12-17 16:49:58 kobe

它不起作用。 – DG3 2010-12-17 16:54:50

@user，你的初始代码是错误的，但我认为它的一部分工作，它应该很简单，我会让你jsfiddle演示等待 – kobe 2010-12-17 16:57:49

如果你想取消高亮每行单击另一个之后，你可以做这样的事情：

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

来源

2010-12-17 16:50:17 jyoseph

它突出显示所有行和列。我在我的桌子上使用了我的身体。 – DG3 2010-12-17 16:55:30

它适用于您的演示，但在我的情况下，我使用的是thead和tbody，并且它使每个行和列的边框更改颜色，而不是选定的行 – DG3 2010-12-17 16:59:26

我看，请查看我的最新更新 – jyoseph 2010-12-17 17:01:28

不像.hover（）。点击（）需要一个回调函数..看到.toggle（），而不是...或者你可以使用一个CSS类跟踪状态 - 看到这些例子：http://www.elated.com/articles/jquery-manipulating-element-classes/

来源

2010-12-17 16:56:50 zack

我会建议这种方法：

CSS：

.highlight { background-color: #ffdc87 }

JS：

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

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

来源

2010-12-17 17:04:13 karim79

jquery行悬停和单击事件

回答

相关问题