0

私は以下のhtmlを持っています。私の目標は、マウスオーバー イベントで同じ非表示値のテーブル行を強調表示することです。つまり、最初の行または 3 番目の行にマウスを合わせると、この場合は「cus1」である非表示の値に基づいて、1 番目と 3 番目の両方が強調表示されます。これまでのところ、現在のテーブル行のみを強調表示することができました。誰でもこれに対する解決策を提供できますか。以下は私の詳細です：

HTML:

<table id="tab1">
<tr>
    <td id="id1" >name1</td>
    <td id="id2" >acc1 </td>
    <td id="id3" ><input type="hidden" id="cus1" name="cus1" value="cus1" /></td>
 </tr>
 <tr>
    <td id="id4" >name2</td>
    <td id="id5" >acc2 </td>
    <td id="id6" ><input type="hidden" id="cus2" name="cus2" value="cus2" /></td>
 </tr>
 <tr>
    <td id="id7" >name1</td>
    <td id="id8" >acc3 </td>
    <td id="id9" ><input type="hidden" id="cus3" name="cus1" value="cus1" /></td>
 </tr>
 </table>

jQuery:

$(document).ready(function(){
  $('td').live('mouseover', function(){
    $(this).parent().addClass('hover');
  }).live('mouseout', function(){
    $(this).parent().removeClass('hover');
  });
});

CSS:

.hover {
  background-color: cornflowerblue;
}
4

1 に答える 1

3

試す

$(document).ready(function(){
    $(document).on('mouseover', 'tr', function(){
        var $this = $(this), val  = $this.find('input:hidden').val();
        $this.siblings(':has(input[value="' + val + '"]:hidden)').addBack().addClass('hover');
    }).on('mouseout', 'tr', function(){
        var $this = $(this), val  = $this.find('input:hidden').val();
        $this.siblings(':has(input[value="' + val + '"]:hidden)').addBack().removeClass('hover');
    });
});

デモ:フィドル

于 2013-08-19T08:11:00.553 に答える