Jquery Masquer la ligne du tableau sur le vol stationnaire

Question

J'ai un div contenant li et un div contenant une table. Quand il y a un hover sur un li, je veux que le "system" prenne l'attribut "refSortie" et cache les lignes du tableau pour lesquelles l'attribut "refDate" est égal à l'attribut "refSortie". Mon code ne fonctionne pas. J'espère que quelqu'un peut aider. Merci d'avance pour vos réponses. À votre santé. Marc.

Mon 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> 

Mes 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

Vous avez une multitude de choses qui se passent ici. Code js fixe: 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"); 
    } 
}); 

Les erreurs étaient: refDate=refSortie // doit être variable css("display":"inline") // si vous souhaitez définir css cette façon, vous devez utiliser un obj par exemple css({"display": "inline"})

Answer 2

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

Answer 3

Votre variable est entre guillemets. Besoin de concaténer.

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

Answer 4

Correction d'un tas de problèmes. DEMO ici

1. Vous pouvez utiliser Hover pour entrer et quitter la souris. Read here
2. La refSortie est une variable et doit donc être ajoutée au sélecteur sous forme de chaîne. $('#contentTwo table tr[refDate="' + refSortie +'"]')
3. refSortie non initialisé dans le gestionnaire de la souris.
4. .css La fonction prend un tableau associatif (.css({"color":"red"})) ou un style unique séparé par une virgule (.css("color","red")).
5. a changé .css({"display","inline"}); en .css({"display","block"}); car il s'agit d'une table.

code Voir ci-dessous,

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