jquery + css - hover with parameter

jquery + css - hover with parameter

本文关键字：with parameter hover css jquery      更新时间：2023-09-26
<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>

i would like:

如果我将参数aaa="one"的TR悬停，则所有参数bbb="one"的TR的background-color将为红色。

我想使用jquery。

实例:http://jsfiddle.net/syCMN/1/

谢谢你的帮助!

$('tr').hover(function(){
     $('tr[bbb="'+$(this).attr('aaa')+'"]').addClass('red');
},function(){
     $('tr').removeClass('red');   
})
http://jsfiddle.net/syCMN/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>

应该这样做:

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

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

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