Jquery隐藏表格上悬停的行

Question

我有一个div包含li和包含表格的div。当在li上悬停时，我希望“系统”采用“refSortie”属性并隐藏“refDate”属性等于“refSortie”属性的表行。我的代码不起作用。希望有人能帮忙。预先感谢您的回复。干杯。马克。

我的HTML：

<div id="contentWrapper"> 
    <div id="contentOne" class="content"> 
     <ul> 
      <li refSortie="mmm">MMMMM</li> 
      <li refSortie="sss">SSSSS</li> 
      <li refSortie="mmm">MMMMM</li> 
      <li refSortie="ppp">PPPPP</li> 
     </ul> 
    </div> 

    <div id="contentTwo" class="content"> 
     <table> 
      <tr refDate="mmm"><td>MMMMM</td><td>hdqjkhs</td><td>hdqjkhs</td></tr> 
      <tr refDate="mmm"><td>MMMMM</td><td>hdqjkhs</td><td>hdqjkhs</td></tr> 
      <tr refDate="ppp"><td>PPPPP</td><td>hdqjkhs</td><td>hdqjkhs</td></tr> 
      <tr refDate="sss"><td>SSSSS</td><td>hdqjkhs</td><td>hdqjkhs</td></tr> 
     </table> 
    </div> 
    <div id="contentThree" class="content"></div> 
    <div id="contentFour" class="content"></div> 
</div> 

我的JS：

$('#contentOne li').hover(function(){ 
    var refSortie=$(this).attr('refSortie'); 

    if(!$('#contentOne').hasClass('freezed')){ 
     $('#contentTwo table tr[refDate=refSortie]').css("display":"none");} 
}).mouseout(function(){ 
    if(!$('#contentOne').hasClass('freezed')){ 
     $('#contentTwo table tr[refDate=refSortie]').css("display":"inline");}  
}); 

Answer 1

你有事情会在这里的，众说纷纭。固定JS代码： http://jsfiddle.net/brentmn/cRJdz/

$('#contentOne li').hover(function() { 
    var refSortie = $(this).attr('refSortie'); 

    if (!$('#contentOne').hasClass('freezed')) { 
     $('#contentTwo table tr[refDate!=' + refSortie + ']').css("display", "none"); 
    } 
}).mouseout(function() { 
    var refSortie = $(this).attr('refSortie'); 
    if (!$('#contentOne').hasClass('freezed')) { 
     $('#contentTwo table tr').css("display", "inline"); 
    } 
}); 

的错误是： refDate=refSortie //需要是可变 css("display":"inline") //如果你要设置的CSS这种方式，你必须使用一个OBJ例如css({"display": "inline"})

Answer 2

$('#contentOne li').hover(function(){ 
    $('#contentTwo tr[refDate='+$(this).attr('refSortie')+']').hide(); 
}); 

Answer 3

你的变量用引号引起来。需要连接。

$('#contentTwo table tr[refDate=' + refSortie + ']') 

Answer 4

修复了一堆问题。 DEMO这里

1. 你可以使用悬停鼠标进入和鼠标离开。阅读here
2. refSortie是一个变量，因此它必须作为字符串附加到选择器。 $('#contentTwo table tr[refDate="' + refSortie +'"]')
3. refSortie未在鼠标输出处理程序中初始化。
4. .css函数需要一个关联数组（.css({"color":"red"})）或用逗号分隔的单个样式（.css("color","red")）。
5. 已更改.css({"display","inline"});至.css({"display","block"});，因为它是表格。

见下面的代码，

$('#contentOne li').hover(function() { 
     var refSortie = $(this).attr('refSortie'); 

     if (!$('#contentOne').hasClass('freezed')) { 
     $('#contentTwo table tr[refDate="' + refSortie +'"]').css({"display": "none"}); 
     } 
    }, function() { 
     var refSortie = $(this).attr('refSortie'); 
     if (!$('#contentOne').hasClass('freezed')) { 
      $('#contentTwo table tr[refDate="' + refSortie + '"]').css({"display": "block"}); 
     } 
    });