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（）過濾器將不起作用

回答

相關問題