我可以在不使用'this'的情況下重寫Javascript嗎？

Question

我是JS的新手，我無法讓它工作。

這是我的代碼

jQuery('ul.menu li').each(function() {
jQuery(this).removeClass('current-menu-item');
jQuery(this).removeClass('current_page_item');
});
jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');

現在， 應該做的是從導航菜單上的一個鏈接中刪除突出顯示的內容，並突出顯示被單擊的內容（我有一個AJAX實現）。

由於某種原因，它什么也沒做。 我有一種感覺，這是由於“ this”導致了另一種結構化代碼的方式，因此我可以算出代碼是否錯誤（我不認為這是錯誤的）還是“ this”導致的？

編輯：

抱歉，我沒有提供足夠的信息。 我正在使用Twenty Fourteen wordpress主題，但我正在使用AJAX服務這些頁面。

http://twentyfourteendemo.wordpress.com/

我有全局應用的代碼（我在同一個地方有其他代碼切換導航一旦點擊（在移動設備上），並且工作正常）

我在頂部有菜單（沒有任何下拉菜單，只有鏈接）。 我不能給出一個鏈接，因為它目前不是外部的。 我的代碼應該努力改變這個嗎？

正如一些人評論“這是什么'這個'”我覺得我完全錯過了一些東西。

Answer 1

你不需要循環每個項目來逐個刪除類，這更容易：

jQuery('ul.menu li').removeClass('current-menu-item').removeClass('current_page_item');

或者（它是一樣的）：

jQuery('ul.menu li').removeClass('current-menu-item current_page_item');

但我不明白這是什么'這個'：

jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');

你的意思是 ：

jQuery('ul.menu li').addClass('current_page_item current-menu-item');

或者，如果您正在使用事件監聽器（例如點擊，如@Daniel Sanchez對評論的感覺），您只需要：

jQuery('ul.menu li').click(function(){   
  // Remove class on each item  
  jQuery('ul.menu li').removeClass('current-menu-item current_page_item');

  // Add class for this one    
  jQuery(this).addClass('current_page_item current-menu-item'); 
})

Answer 2

尚不清楚您要做什么，但是可以對代碼進行一些簡化：

jQuery("ul.menu li a").click(function(){
    jQuery('ul.menu li').removeClass('current-menu-item current_page_item');
    jQuery(this).parent('li').addClass('current_page_item current-menu-item');
});

http://jsfiddle.net/re3hjzyf/

Answer 3

是的，通過更換this與'ul.menu li' 。

所以代碼就是這樣的

jQuery('ul.menu li').each(function() {
   jQuery('ul.menu li').removeClass('current-menu-item')
                       .removeClass('current_page_item');
});
// not sure what the following code is referencing too
// it is outside the bounds of .each() function.
jQuery(this).parents('li').addClass('current_page_item');
jQuery(this).parents('li').addClass('current-menu-item');

是什么this

在使用JavaScript和許多面向對象的編程語言時， this關鍵字用於引用程序員正在使用的當前上下文。 您當前正在引用ul.menu li元素，因此通過使用this可以調用.each()函數中選定的元素。

您可以使用在each()函數中使用的元素選擇器替換它。

Answer 4

jQuery('.current-menu-item').removeClass('current-menu-item');
jQuery('.current_page_item').removeClass('current_page_item');

在這里，我假設只有一個項目將具有這些類，因為它將表示當前選擇了哪個菜單項目。 最好的選擇方法是搜索要刪除的類。 （如果這些類總是一起使用，您也可以在同一行上將它們都刪除，盡管那樣的話，您可能要考慮是否確實需要兩者。

jQuery('ul.menu li').on("click", function() {
jQuery(this).addClass('current_page_item').addClass('current-menu-item');
}

當“this”有一個值時，你只能使用“this”作為選擇器的參數（即：在每個循環內部或內部開啟。在這種情況下，我使用on（）函數來應用添加類的函數到點擊的任何列表項。

合並兩者，您將最終得到：

jQuery('ul.menu li').on("click", function() {
    jQuery('.current-menu-item').removeClass('current-menu-item');
    jQuery('.current_page_item').removeClass('current_page_item');
    jQuery(this).addClass('current_page_item').addClass('current-menu-item');
}