Question

我有一个包含li的div和一个包含表格的div。当我在li上悬停时，我希望“system”采用“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

解决了一系列问题。 DEMO这里

您可以将鼠标悬停用于鼠标输入和鼠标离开。阅读here
refSortie是一个变量，因此必须将其作为字符串附加到选择器。 $('#contentTwo table tr[refDate="' + refSortie +'"]')
refSortie未在鼠标移出处理程序中初始化。
.css函数采用关联数组（.css({"color":"red"})）或以逗号分隔的单个样式（.css("color","red")）。
将.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"});
        }
     });

Answer 3

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

Answer 4

您的变量在引号中。需要连接。

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

Jquery在悬停时隐藏表格行

4 个答案: