jquery - jquery mouseover 如何使用获取当前隐藏值

Question

我有下面的html。我的目标是在鼠标悬停事件中突出显示相同隐藏值的表行。这意味着当我将鼠标悬停在第一行或第三行时，第一行和第三行都应根据隐藏值突出显示，在本例中为“cus1”。到目前为止，我已经设法仅突出显示当前表格行。任何人都可以为此提供解决方案。以下是我的详细信息：

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;
}

Answer 1

尝试

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

演示：小提琴