2012-05-01 51 views
2

如何選擇在jQuery中傳遞if語句的dom元素?

我正在檢查網址是否有散列。哈希匹配視頻容器的類。如果url確實有一個散列,則帶有匹配類的iframe會獲得一個活動類,以將其顯示爲塊而不是隱藏。如果沒有,則顯示在列表中的第一個視頻:

jQuery(document).ready(function($) { 

    videoCarousel(); 

}); 

function videoCarousel() { 

    // Set variables 
    var carousel = $('#video_container'); 
    var videos = $('#video_container #video iframe'); 

    // Get url hash and remove # from begining 
    var hash = window.location.hash.substring(1); 


    if (videos.hasClass(hash)) { 
     $(this).addClass('active'); 
    } else { 
     videos.first().addClass('active'); 
    } 

} 
+2

這是不可能告訴沒有更多的上下文是否是正確的代碼或錯誤代碼。請張貼更多的腳本,以及一些HTML。 –

+0

if語句是正確的,我認爲問題出在你的'$(this)'上。通過'$(this)'如果你的意思是$('div')',它將不起作用。你將不得不使用'$('div')'。 –

+0

你真的不需要'if'。看看@ Neysor和@ JNF的回答 –

回答

3

如果url確實有哈希,則iframe 與匹配類獲取一個活動類,將其顯示爲塊,而不是隱藏。如果沒有,則顯示在列表中的第一個視頻:

(我的重點)

這是關鍵信息,我想我們很多人看過去吧。你需要改變你的選擇,你不想this都:

function videoCarousel() { 
    // Set variables 
    var carousel = $('#video_container'); 
    var videos = $('#video_container #video iframe'); 

    // Get url hash and remove # from begining 
    var hash = window.location.hash.substring(1); 

    // Get the video with the matching class 
    var targetVideo; 
    if (hash) { 
     targetVideo = videos.filter("." + hash); 
    } 
    if (!targetVideo || !targetVideo[0]) { 
     // There's no hash, or no match; use the first 
     targetVideo = videos.first(); 
    } 

    // Add the class 
    targetVideo.addClass("active"); 
} 
3

我想使用jQuery將是正確的做法:

$('div.video').addClass('active'); 
+3

@ MerlynMorgan-Graham:*「如果沒有該類的div,這將會引發空引用異常......」*否,不會。這是關於jQuery的一件大事,它是基於集合的。所以如果沒有'div.video',你會得到一個空的jQuery對象(一個空集),而不是'null'。你可以在空的jQuery對象上調用'addClass'。這完全沒問題,它最終成爲一個沒有操作。 –

+0

@ MerlynMorgan-Graham:不會。jQuery自v1.0版本開始就基於set:http://jsbin.com/azumaw –

+0

@ T.J.Crowder:Aha。我剛剛發現我一直在使用一些舊的毛髮版本的原型,我只是認爲它是jQuery的一些舊版本。感謝您挑戰我的假設。 –

0

我不知道,但你找這樣的:DEMO

$("div.video").each(function(){ 
    $(this).addClass("active"); 
}); 

,因爲你的編輯

認爲你可以想有:

jQuery(document).ready(function($) { 

    videoCarousel(); 

}); 

function videoCarousel() { 

    // Set variables 
    var carousel = $('#video_container'); 
    var videos = $('#video_container #video iframe'); 

    // Get url hash and remove # from begining 
    var hash = window.location.hash.substring(1); 

    var hasone = false; 
    videos.each(function(){ 
     if($(this).hasClass(hash)) { 
     $(this).addclass("active"); 
     hasone = true; 
     return false; //breaks each(); 
     } 
    }); 
    if(!hasone) { 
     videos.first().addClass('active'); 
    } 
} 
+0

'div'和'.video'之間不應有空格。小提琴是正確的。 – Nix

+0

@nix謝謝,糾正它! – Neysor

-1

也許嘗試這樣的:

function videoCarousel() { 

// Set variables 
var carousel = $('#video_container'); 
var videos = $('#video_container #video iframe'); 

// Get url hash and remove # from begining 
var hash = window.location.hash.substring(1); 


$(".yourClass").each(function() { 
    if ($(this).hasClass(hash)) { 
     $(this).addClass("active"); 
    } else { 
     videos.first().addClass("active"); 
    }); 
}); 
} 
0
function videoCarousel() { 

    // Set variables 
    var carousel = $('#video_container'); 
    var videos = $('#video_container #video iframe'); 

    // Get url hash and remove # from begining 
    var hash = window.location.hash.substring(1); 
    //Filter out the element that match the hash or is the first video in the collection 
    var activeVideo = videos.filter(function(i) { 
     return hash === "" ? i === 0 : $(this).hasClass(hash); 
    }); 

    activeVideo.addClass('active'); 
}