Question

我有以下的HTML。我的目标是在mouseover事件上突出显示相同隐藏值的表行。当我在第一行或第三行鼠标悬停时的含义，第一行和第三行都应根据隐藏值突出显示，在这种情况下，隐藏值为“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');
    });
});

演示：Fiddle

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

1 个答案: