jquery代碼問題

-2

我想了解我的jQuery如何工作。jquery代碼問題

所以基本上我創建了一個jQuery的子菜單效果，這裏是我的jQuery

$(".sidebar-icon").click(function() {     
    $(".content").toggleClass("sidebar-collapsed").toggleClass("sidebar-collapsed-back"); 
    $(" 
$('.nav a').click(function(){ 
    $(this).closest('li').find('ul').toggleClass('disp');

任何人都可以幫助我瞭解和解釋每個代碼逐個？

來源

2016-04-14 Rodel Garcia

對不起，SO不是輔導服務。你需要問**特定的**問題，而不是像這樣的解釋的廣泛請求。 – Barmar

只是試圖從你們那裏得到一些信息。只是盡我所能去理解。 –

這些內容的每一部分都在jQuery文檔中進行了解釋。哪一部分讓你感到困惑？ – Barmar

.toggleClass()：根據類的存在或狀態參數的值，在匹配元素集合中的每個元素中添加或刪除一個或多個類。

.find()：獲取當前匹配元素集合中每個元素的後代，由選擇器，jQuery對象或元素過濾。

.closest()：對於集合中的每個元素，通過測試元素本身並遍歷DOM樹中的祖先來獲取匹配選擇器的第一個元素。

對於其他功能只是谷歌它！像jquery removeClass，你會得到你所有的答案。

來源

2016-04-14 02:05:37

.toggleClass檢查所選元素是否具有給定類。如果他們這樣做，它將刪除它，否則它會添加它。

在事件處理函數中，this是觸發事件的目標元素。因此，在.click()處理程序中，它是您單擊的元素。這是您從任何教程或教科書中學習jQuery最基本的東西之一。

所以

$(this).closest('li').find('ul').toggleClass('disp');

意味着找到包含您點擊鏈接最接近<li>元素，然後找到其中的所有<ul>元素，切換他們disp類。

來源

2016-04-14 02:11:53 Barmar

好吧，因爲你似乎無法理解jQuery API文檔，我會繼續爲你分解它。

1號線

$(".sidebar-icon").click(function() {

在第一行，你告訴jQuery的，當你點擊與類「欄圖標」（這恰好是漢堡圖標）的元素就可以了將觸發你指定封裝在{}內的任何事件。 click（）被稱爲方法/事件處理程序。

線2

$(".content").toggleClass("sidebar-collapsed").toggleClass("sidebar-collapsed-back");

這裏這是遵循您點擊與類側邊欄圖標的元素之後的事件。

行的第一部分：

$(".content")

告訴jQuery來尋找與類「內容」的元素。

接下來，

.toggleClass("sidebar-collapsed").toggleClass("sidebar-collapsed-back");

都已經找到指定的元素之後jQuery將調用的方法。每次點擊「.sidebar-icon」時，toggleClass（）方法基本上都會添加並將類「sidebar-collapsed」和「sidebar-collapsed-back」移除到具有「content」類的元素在你的情況下是一個div）。

線3

$("#nav li ul").removeClass('disp');

類似於線2，jquery的查找包含id爲「#nav」（一個ul元素）及其後代裏，然後利的後代ul元素的元素。然後Jquery調用removeClass（）方法並從該元素中刪除類「disp」。

線4和5

$("#nav li").find('span.fa').addClass('fa-plus').removeClass('fa-minus'); 
});

從上面沒有太大的不同。 jquery查找包含id「nav」及其後代元素li的元素。然後Jquery調用find（）方法並遍歷DOM樹以查找具有類「fa」的後代span元素。然後，jquery調用addClass方法，並將類「fa-plus」添加到具有類「fa」的span元素。以同樣的方式，Jquery調用removeClass（）方法，並從類「fa」中刪除同一個span元素的類「fa-minus」。

最後，第5行基本上就是關閉和結束jquery函數的方式，就像您使用其他語言一樣。因此，現在您應該能夠閱讀其他代碼並瞭解發生了什麼。我盡我最大努力以最簡單的方式解釋這一點，而不會在技術上出錯。不過，如果我做了，任何人都可以隨時糾正我。

來源

2016-04-14 03:20:28 phamous

jquery代碼問題

回答

相關問題