jquery + css - hover with parameter_问答_开发者

开发者 https://www.devze.com 2023-04-11 04:31 出处：网络

<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:

if i hover TR with parameter aaa="one" then ba开发者_StackOverflowckground-color for all TR with parameter bbb="one" will be red.

i would like use jquery.

LIVE EXAMPLE: http://jsfiddle.net/syCMN/1/

thanks for help!

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

This should do it:

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

Generally, this is a bad idea. Your code can't pass any kind of HTML validation because of your custom attributes. Doesn't it make more sense to use two classes to describe each <tr> ?

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