Question

我正在尝试在页面加载时将一个类替换为另一个类，具体取决于URL中的目录。我的代码适用于我的菜单中的第一个div，但不适用于其他任何代码。这是代码：

$('document').ready(function() {
    var pathname = window.location.pathname;
    pathname = pathname.replace('/MVC/', '');

    if (pathname == $('.navitem').attr('rel')) {
        $('.navitem[rel='+pathname+']').toggleClass('navitem selected_menu')
    }
});

HTML如下：

<div class="navitem" rel="dashboard"><a href="http://localhost/MVC/dashboard">Dashboard</a></div>
<div class="navitem" rel="chat"><a href="http://localhost/MVC/chat">Chat</a></div>
<div class="navitem" rel="users"><a href="http://localhost/MVC/user">Users</a</div>

当我alert($('.navitem').attr('rel'))时，它始终会返回第一个rel的{{1}}值。如何让它看到所有这些而不仅仅是第一个？

Answer 1

您不能只使用一个比较操作，因为您必须检查所有div。

$(".navitem").filter(function() {
  return $(this).attr("rel") === pathname;  // filter out the correct one(s)
}).toggleClass("navitem selected_menu");

顺便说一句，它通常是$(document).ready。虽然在$的情况下传递给.ready的内容并不重要，但这是事实上的标准。

Answer 2

你需要使用每个循环遍历它们：

$('.navitem').each(function(){
    if (pathname == $(this).attr('rel')) {
        $(this).toggleClass('navitem selected_menu')
    }
});

Answer 3

您需要使用循环。试试这个：

$(".navItem").each(function () {
    if (pathname == $(this).attr('rel')) {
        $(this).toggleClass('navitem selected_menu')
    }
});

Answer 4

无需检查任何内容，让选择器完成所有操作。

$('navitem[rel=' + pathname + ']').toggleClass('navitem selected_menu');

甚至不包括if语句。

Answer 5

尝试使用JQuery的.each方法来测试所有匹配元素。像这样：

$('document').ready(function() {
    var pathname = window.location.pathname;
    pathname = pathname.replace('/MVC/', '');

    $('.navitem').each(function() {
        if ($(this).attr('rel') == pathname) {
            $(this).toggleClass('selected_menu');
        }
    });

});

`if`条件只适用于遇到的第一个div

5 个答案: