各ループ内の要素のクラスを見つける方法

メニューのアクティブなページ項目のスタイルを変更できるメニューシステムを作成しようとしています。私は各ページで別々のボディクラスを使用しています。次に、メニュー内のliを繰り返し、ボディクラスと一致するものを探します。その試合では、そのメニュー項目に新しいスタイリングを追加します。各ループ内の要素のクラスを見つける方法

ここまでは私のコードです。

HTML

<body class="home-state"> 
... 

<div class="menu-left">  
    <ul> 
    <li class="home-state"> 
     <a href="/">Home</a> 
    </li> 
    <li class="work-state"> 
     <a href="/work">Work</a> 
    </li> 
    <li class="services-state"> 
     <a href="/services">Services</a> 
    </li> 
    <li class="about-state"> 
     <a href="/about">About</a> 
    </li> 
    <li class="blog-state"> 
     <a href="//blog.example.com" target="_blank">Blog</a> 
    </li> 
    <li class="shop-state"> 
     <a href="/shop">Shop</a> 
    </li> 
    <li class="contact-state"> 
     <a data-toggle="modal" href="#modal-coworking">Contact</a> 
    </li> 
    <li class="project-state"> 
     <a href="/brief/index">Project brief</a> 
    </li> 
    </ul> 
</div> 

... 
</body>

var bodyClass = $("body").attr('class'); 

$('.menu-left ul li').each(function(){

まず：私は

var element = $(this);

第二に動作しませんでした$(this).attr("class");を使用している、ここで要素のクラスを見つけたいです：私は要素liにクラス.activeを追加したいの一致がある場合：私は、クラス最終 bodyClass

console.log(element);

と一致するかどうかを確認するif文を使用します。

});

出典

2017-11-24 Anders Kitson

ずつしか持つことが保証され、あなたの ''要素であり、要素は複数のクラスを持つことができ、言ったように単一のクラス？（私は、* class * = "home-state big-text"のようなものではない） – nnnnnn

私はただ手作業で追加していますが、後で誰かがクラスを追加すると、コードが壊れてしまいます。私はURLのパスをチェックし、正規表現を使うことを考えていましたが、ローカルではページに.htmlを追加する必要があります（私の迷惑メールマシンとは何か）。もし私がURLを盗聴するオプションを使用した場合、 devとローカルサーバー。私は要素のIDを1つだけ持つことができるので、クラスではなくIDでそれを行うことができます。 –

、私は、現在のページが何であるかを指定することではなく、クラスよりもdata-属性を使用するようにあなたの体の要素を変更することを示唆しているのです。

<body data-current="home-state">

その後JSは、関連するメニュー項目にactiveクラスを追加するために必要な簡単です：

$("li." + $("body").attr("data-current")).addClass("active")

質問に記載されているように、クラスを比較するメニュー項目をループする必要はありません。なぜなら、そのクラスに基づいて必要なli要素を直接選択できるだけなのでです。 body要素は、その後$("body").attr("data-current")は上記のコードを意味しますundefinedを返しますdata-current属性を持たない場合には

は$("li.undefined")で要素を選択し、それにクラスを追加しようとします。それは無害になるので、おそらくあなたは、このようなクラスを持つ要素が存在しないが、あなたは明示的data-current属性が存在していることをテストしたい場合：

var current = $("body").attr("data-current") 
if (current) { 
    $("li." + current).addClass("active") 
}

出典

2017-11-24 02:49:35 nnnnnn

-1

メニュー項目のクリックイベントをバインドできませんでした。テスト済み

var bodyClass = $("body").attr('class'); 
$('.menu-left ul li').on("click", function() { 
var myClass = $(this).attr("class"); 
    alert(myClass); 
});

以下のように従ってください：要素は複数のクラスを持つことができることを考えるとhttps://codepen.io/anon/pen/XzYjGY

出典

2017-11-24 02:34:34

私はクリックイベントをバインドしたくありません。本文のクラスのページ・ルックをロードし、それをメニューのクラスに一致させて、アクティブなクラスを持つことができます。私はこれがページの読み込みで起こることを望んでいません。 –

あなたはカップルの方法でこれを行うことができ、ここで行う簡単な方法ですこの;

var bodyClass = $("body").attr('class'); 

$("li." + bodyClass).addClass("active")

このループにループを使用することもできます。

var bodyClass = $("body").attr('class'); 

$(".menu-left li").each(function(i, classes) { 
    if (bodyClass === $(this).attr("class")) { 
     $(this).addClass("active") 
    } 
})

の両方がジョブを実行します。

出典

2017-11-24 03:06:44

enter image description here

コメントは、あなたがそれをチェックする必要がありますので、1

出典

2017-11-24 03:10:24

"menu-left"クラスの要素にも複数のクラスがある場合は、それもチェックしてください。 –

ではなくidを使用することをお勧めします。 Stack Overflowで将来の努力のために[回答する方法]（https://stackoverflow.com/help/how-to-answer）ページをチェックする方が良いでしょう。 -ありがとうございました – Momin

各ループ内の要素のクラスを見つける方法

答えて

関連する問題