Question

我有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

您的菜单可能嵌套了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.
});

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

Answer 2

点击事件源自a元素。因此，在它冒泡到第一个li之前先抓住它，并使所有a默认。然后继续my solution

$('#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 }

jQuery - 奇怪的函数行为

2 个答案: