JQuery：向所有孩子添加點擊事件，不起作用

Question

我正在嘗試將“活動”類添加到一個且一次只能單擊一個菜單項。 然后，活動類允許我將所選菜單項的背景變為綠色。

當我將.click（）單獨添加到每個子節點時，它可以工作，但不能與當前的.children（）。each（）等一起使用。

我做錯了什么，我該如何解決這個問題？

  $("#left_menu").children().each(function(){ $(this).click(function(){ if (!$(this).hasClass('active')){ $(this).addClass('active'); } $(this).siblings().each(function(){ if ($(this).hasClass('active')){ $(this).removeClass('active'); } }); }); }); 

 ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #e9ebee; position: fixed; height: 100%; overflow: auto; border: 1px solid #e9ebee; border-radius: 6px; font-family: 'Lato', Helvetica, sans-serif; font-size: 18px; } li a { display: block; color: #000; padding: 8px 18px; text-decoration: none; } li a.active { background-color: #008b10; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="left_menu"> <li><a id="tab_wireless" href="#">System Status</a></li> <li><a id="tab_system" href="#">Network Configuration</a></li> <li><a id="radio_list" href="#">Radio List</a></li> <li><a id="search" href="#">Search</a></li> </ul> 

Answer 1

1.問題與您的代碼是要adding class在children of ul即li 。 而在css下面active上類a

li a.active {
    background-color: #008b10;
    color: white;
}

如果您將活動類從a更改為li那么您當前的代碼也將起作用。

li.active {
    background-color: #008b10;
    color: white;
}

以下是您當前代碼的代碼段：

 $("#left_menu").children().each(function(){ $(this).click(function(){ if (!$(this).hasClass('active')){ $(this).addClass('active'); } $(this).siblings().each(function(){ if ($(this).hasClass('active')){ $(this).removeClass('active'); } }); }); }); 

 ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #e9ebee; position: fixed; height: 100%; overflow: auto; border: 1px solid #e9ebee; border-radius: 6px; font-family: 'Lato', Helvetica, sans-serif; font-size: 18px; } li a { display: block; color: #000; padding: 8px 18px; text-decoration: none; } li.active { background-color: #008b10; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="left_menu"> <li><a id="tab_wireless" href="#">System Status</a></li> <li><a id="tab_system" href="#">Network Configuration</a></li> <li><a id="radio_list" href="#">Radio List</a></li> <li><a id="search" href="#">Search</a></li> </ul> 

2.更好的方法你可以在$('ul li a').click上執行此操作$('ul li a').click

這是代碼片段：

 $(document).ready(function(){ $('ul li a').click(function(){ $('li a').removeClass("active"); $(this).addClass("active"); }); }); 

 ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #e9ebee; position: fixed; height: 100%; overflow: auto; border: 1px solid #e9ebee; border-radius: 6px; font-family: 'Lato', Helvetica, sans-serif; font-size: 18px; } li a { display: block; color: #000; padding: 8px 18px; text-decoration: none; } li a.active { background-color: #008b10; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="left_menu"> <li><a id="tab_wireless" href="#">System Status</a></li> <li><a id="tab_system" href="#">Network Configuration</a></li> <li><a id="radio_list" href="#">Radio List</a></li> <li><a id="search" href="#">Search</a></li> </ul> 

Answer 2

你真的不需要這么多的事件處理程序。 您可以使用委托使用幾行代碼並使用事件冒泡來完成此操作。

這是代碼示例。

 $("#left_menu").on('click', function(event) { $("#left_menu a.active").removeClass("active"); $(event.target).addClass('active') }); 

 ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #e9ebee; position: fixed; height: 100%; overflow: auto; border: 1px solid #e9ebee; border-radius: 6px; font-family: 'Lato', Helvetica, sans-serif; font-size: 18px; } li a { display: block; color: #000; padding: 8px 18px; text-decoration: none; } li a.active { background-color: #008b10; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="left_menu"> <li><a id="tab_wireless" href="#">System Status</a></li> <li><a id="tab_system" href="#">Network Configuration</a></li> <li><a id="radio_list" href="#">Radio List</a></li> <li><a id="search" href="#">Search</a></li> </ul> 

Answer 3

請檢查以下代碼。 在此處單擊其他li元素的“活動”類將被刪除，並在所單擊的項目上添加“活動”類。

$("#left_menu li").click(function(){
  var clicked_li = $(this);
  $("#left_menu li").not(clicked_li).removeClass('active'); // Will remove the class active if it is present;
  clicked_li.addClass('active'); // Will add the class if does not exists;
});

Answer 4

如果要更改顏色，則必須將更改應用於不是li a標記。 所以我使用以下jQuery解決了這個問題，我也優化了你的代碼：

$(this).click(function(){
        $("li a.active").removeClass("active");
        $(this).addClass("active");
});

這里是jsfiddle的鏈接，我在HTML或CSS中沒有改變，我所做的就是改變你的CSS。