jquery + css - 悬停参数答案

【问题标题】：jquery + css - hover with parameterjquery + css - 悬停参数
【发布时间】：2011-10-04 22:09:07
【问题描述】：

<table id="tab">
    <tr aaa="one" bbb="ooo"><td>xxx</td><</tr>
    <tr aaa="two" bbb="one"><td>xxx</td><</tr>    
    <tr aaa="three" bbb="one"><td>xxx</td><</tr>    
    <tr aaa="four" bbb="three"><td>xxx</td><</tr>       
</table>

我想：

如果我将带有参数 aaa="one" 的 TR 悬停，那么带有参数 bbb="one" 的所有 TR 的背景颜色将为红色。

我想使用 jquery。

实时示例：http://jsfiddle.net/syCMN/1/

感谢您的帮助！

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

$('tr').hover(function(){
     $('tr[bbb="'+$(this).attr('aaa')+'"]').addClass('red');
},function(){
     $('tr').removeClass('red');   
})

http://jsfiddle.net/syCMN/2/

【讨论】：

【解决方案2】：

<head>
<script type="text\javascript">
  $("#tab tr").hover(function(event){
     var param = $(this).attr("aaa");
     $("[bbb='"+param+"']").toggleClass("red");
  },function(event){
     var param = $(this).attr("aaa");
     $("[bbb='"+param+"']").toggleClass("red");
  });
</script>
</head>

【讨论】：

【解决方案3】：

应该这样做：

$(function(){
    $('tr[aaa=one]').mouseenter(function(e){
        $('tr[bbb=one]').css('background-color', 'red');
    });
});

【讨论】：

【解决方案4】：

一般来说，这是一个坏主意。由于您的自定义属性，您的代码无法通过任何类型的 HTML 验证。使用两个类来描述每个<tr> 不是更有意义吗？

【讨论】：

【解决方案5】：

$('#tab tr[aaa="one"]').hover(
    function(){
        $('#tab tr[bbb="one"]')           
            .css('background-color', 'red');
    },
    function(){
        $('#tab tr[bbb="one"]')           
            .css('background-color', 'white');
    }
);

【讨论】：