jQuery – 奇怪的函数行为

我有UL列表和代码，它选择所选LI元素的所有父元素（ https://stackoverflow.com/a/8883690/106616 ）。 现在，我想在选择其他LI元素时清除选择。 为此，我创建了该代码：

（简单地说，在选择新路径之前，我遍历数组以清除先前的选择，然后我清除数组，同时选择新路径我将新项目添加到该数组）

  $('#nav li').click(function () { //clear the previous selection $.each(myArray, function (i, v) { console.log('loop: ' + v); $('#nav li a[href="' + v + '"]').css('background-color', 'Green'); }); myArray.lenght = 0; //add the new selection $(this).children('a').each(function (item) { myArray.push($(this).attr('href')); console.log('adding: ' + $(this).attr('href')); $(this).css('background-color', 'Red'); }); }); 

但是，如果我选择第一条路径，该代码会生成该输出。

补充：＃/ 1210

循环：＃/ 1210

补充：＃/ 1209

循环：＃/ 1210

循环：＃/ 1209

补充：＃/ 1208

如果我选择例如第二条路径，则输出为：

循环：＃/ 1210

循环：＃/ 1209

循环：＃/ 1208

补充：＃/ 1188

循环：＃/ 1210

循环：＃/ 1209

循环：＃/ 1208

循环：＃/ 1188

补充：＃/ 1187

我认为输出应该是（第二路径选择）

循环：＃/ 1210

循环：＃/ 1209

循环：＃/ 1208

补充：＃/ 1188

补充：＃/ 1187

有人可以帮我解释一下吗？

Answer 1

click事件源自a元素。 因此，在它向第一个li发泡之前先抓住它，并将所有的默认设置为默认值。 然后继续我的解决方案

 $('#nav a').click(function() { $('#nav a').css('background-color', 'green'); }); $('#nav li').click(function () { $(this).children('a').css('background-color', 'red'); }); 

但是使用CSS类完成这一切要好得多：

 $('#nav a').click(function() { $('#nav a.current').removeClass('current'); }); $('#nav li').click(function () { $(this).children('a').addClass('current'); }); 

在CSS中：

 #nav a { background-color: green; } #nav a.current { background-color: red } 

Answer 2

您的菜单可能嵌套了li元素，因此当您单击一个元素时，事件会冒泡，触发您的回调并清除以前选定的元素。 您可以阻止事件冒泡，只需选择所有祖先li元素来设置其子项的样式。

 $('#nav li').click(function () { //clear the previous selection $('#nav li > a').css("background-color", "green"); //add the new selection $(this).parentsUntil("#nav", "li").children("a").css("background-color", "red"); return false; //Prevent the default action and prevent the event from bubbling up. }); 

您可能还希望使用类并为其定义样式，而不是使用内联样式。 如果您决定不喜欢这些颜色或想要额外的造型，那么将来会更易于维护。