jQuery .not（）过滤器将不起作用

我已经尝试了很多方法从选择中筛选出一个类，其中包括filter（）和find（），但无法使其工作。jQuery .not（）过滤器将不起作用

我正在尝试为当前观看的视频创建“熄灯”功能。这是一段简单的代码，我必须做一些根本性的错误...

你可以在www.jaygeorge.co.uk/gwennan-sage/showreel看到代码。

应该发生什么：当你将鼠标悬停在the'lights了”吧，一切都应该消失，除非它有一个最接近的视频‘上打’类。

$(document).ready(function(){ 
$(".lightsout").hover(function() { 
    $(this).next().addClass('playing');  
    $('body').not(".playing").animate({opacity: 0, backgroundColor: 'black'}, 1000); 
});

}）;

来源

2011-03-20 SparrwHawk

我认为你应该使用的覆盖格设置，而不是这样。 – 2011-03-20 16:41:42

'$（'body'）。not（“。playing”）'绝对不起作用。 '$（'body'）'只会*选择'body'元素，而不是任何其他元素。 'not（）'过滤当前选择。所以如果它没有'playing'类，它会从选择中去掉'body'元素。 – 2011-03-20 16:42:37

嗯用一个div覆盖的消息我的朋友建议，但是这意味着设置Z-指标，我以为会有一个更简单的方法，只是通过隐藏一切“除了.playing格”。有没有其他的方式来实现这一点？ – SparrwHawk 2011-03-20 16:48:28

你误解了.not method：

如果提供的jQuery代表一组DOM元素，该.not() 方法从匹配元素的子集构造一个新的jQuery对象。提供的选择器是针对每个元素测试的 ;结果中将包含与选择器不匹配的元素。

这意味着你的查询$('body').not('.playing')选择所有机构认为不属于类.playing。

至于熄灯效果，通常这是通过创建100％宽度，100％高度div来实现的，该高度div被分层放置在其余内容之上。

来源

2011-03-20 16:45:26

感谢乔治，你是否有一些示例代码来创建熄灯效果？我的意思并不是懒惰，我只是一个jQuery新手，需要花几个小时才能弄清楚。 – SparrwHawk 2011-03-20 16:52:11

@Sparrohawx jQuery的工具的[揭露]（http://flowplayer.org/tools/toolbox/expose.html）插上。认真不过，如果你搜索“jQuery的熄灯”在谷歌，你会发现很多的解决方案。 – Haochi 2011-03-20 19:04:54

改变这一行

$('body').not(".playing").animate({opacity: 0, backgroundColor: 'black'}, 1000);

这个

$('body *').not(".playing").animate({opacity: 0, backgroundColor: 'black'}, 1000);

来源

2011-03-20 17:00:08

感谢您的建议，但它没有奏效。 – SparrwHawk 2011-03-20 17:02:38

我试过他们使用jsfiddle，它的工作：http://jsfiddle.net/LSF9Z/。也许你可以发布html以更好地理解你的问题。 – 2011-03-20 17:04:52

嗨jSang，我更新了jsfiddle，以便它与我的代码更加匹配 - http://jsfiddle.net/LSF9Z/1/但它似乎遇到了麻烦。也许是因为它是一个对象？ – SparrwHawk 2011-03-20 17:31:14

任何人都希望在这最后的代码。解决方案从http://www.jankoatwarpspeed.com/post/2009/05/17/Use-jQuery-to-turn-off-the-lights-while-watching-videos.aspx

//=Jay. Create div before Showreel. 
$(document).ready(function(){ 
    $('.videopress').before("<div class='lightsout'><p>Once the video starts playing hover your mouse here to dim the lights.</p></div>"); 
    $('body').before("<div id='curtain'></div>"); 
}); 

//=Jay. Showreel Curtain down 
$(document).ready(function(){ 
    $(".lightsout").hover(function(){ 
     $(this).next().addClass('playing'); 
     $('#curtain').delay(500).fadeIn(); 
    }, function(){ 
     $(this).next().removeClass('playing'); 
     $('#curtain').fadeOut(); 
    }); 
});

和CSS采取...

/*=Jay. IE6 doesn't support Fixed positioning which is needed for the curtain below.*/ 
.ltie7 .lightsout { 
    display: none; 
} 

.lightsout:hover { 
    cursor: none; 
} 

#curtain { 
    position: fixed; 
    display: none; 
    left:0; 
    top:0; 
    width:100%; 
    height: 100%; 
    z-index:1000; 
    background: black; 
} 

.playing { 
    position: relative; 
    z-index: 1001; 
}

来源

2011-03-21 09:31:35 SparrwHawk

jQuery .not（）过滤器将不起作用

回答

相关问题