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