0

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>

Iの場合、常に最初のの値をalert($('.navitem').attr('rel'))返します。最初のものだけでなく、それらすべてを見るにはどうすればよいですか？reldiv

4

5 に答える 5

2

すべてをチェックする必要があるため、1つの比較操作だけを使用することはできませんdiv。

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

ちなみに、通常は$(document).readyです。$の場合、何を渡すかは問題ではありませんが.ready、これは事実上の標準です。

于 2012-05-29T19:29:19.570 に答える
1

それぞれを使用してそれらをループする必要があります。

$('.navitem').each(function(){
    if (pathname == $(this).attr('rel')) {
        $(this).toggleClass('navitem selected_menu')
    }
});
于 2012-05-29T19:28:41.583 に答える
1

ループを使用する必要があります。これを試して：

$(".navItem").each(function () {
    if (pathname == $(this).attr('rel')) {
        $(this).toggleClass('navitem selected_menu')
    }
});
于 2012-05-29T19:28:50.963 に答える
1

何もチェックする必要はありません。セレクターにすべてを任せてください。

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

ifステートメントも含めないでください。

于 2012-05-29T19:29:03.477 に答える
0

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');
        }
    });

});
于 2012-05-29T19:50:35.820 に答える