web-dev-qa-db-ja.com

JavaScriptでクラスを追加

ニースナビゲーションメニューを作成するためのバニラJavaScriptをいくつか書いています。アクティブなクラスの追加に固執しています。

Idではなくクラス名で要素を取得しています。以下のコードはidで置換された場合に機能しますが、複数の要素に適用する必要があります。

HTML

<img class="navButton" id="topArrow" src="images/arrows/top.png" />
<img class="navButton" id="rightArrow" src="images/arrows/right.png" />

JS

var button = document.getElementsByClassName("navButton");

button.onmouseover = function() {
    button.setAttribute("class", "active");
    button.setAttribute("src", "images/arrows/top_o.png");
}

JQueryを含む回答はありません。

javascriptclass
36
vincentieo

document.getElementsByClassNameはノードリストを返します。そのため、リストを繰り返し処理し、イベントを個々の要素にバインドする必要があります。このような...

var buttons = document.getElementsByClassName("navButton");

for(var i = 0; i < buttons.length; ++i){
    buttons[i].onmouseover = function() {
        this.setAttribute("class", "active");
        this.setAttribute("src", "images/arrows/top_o.png");
    }
}
44
mohkhan

スニペットでは、buttonはNodeListのインスタンスであり、イベントリスナーを直接アタッチすることも、要素のclassNameプロパティを直接変更することもできません。
あなたの最善の策は、イベントを委任することです：

document.body.addEventListener('mouseover',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'img' && target.className.match(/\bnavButton\b/))
    {
        target.className += ' active';//set class
    }
},false);

もちろん、activeイベントが発生したらmouseoutクラスを削除する必要があると思います。そのために2番目の委任者の使用を検討するかもしれませんが、could activeクラスを持つ1つの要素にイベントハンドラーをアタッチするだけです：

document.body.addEventListener('mouseover',function(e)
{
    e = e || window.event;
    var oldSrc, target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'img' && target.className.match(/\bnavButton\b/))
    {
        target.className += ' active';//set class
        oldSrc = target.getAttribute('src');
        target.setAttribute('src', 'images/arrows/top_o.png');
        target.onmouseout = function()
        {
            target.onmouseout = null;//remove this event handler, we don't need it anymore
            target.className = target.className.replace(/\bactive\b/,'').trim();
            target.setAttribute('src', oldSrc);
        };
    }
},false);

このコードには改善の余地がありますが、ここではすべてを楽しみません;-)。

ここでフィドルを確認してください

7
Elias Van Ootegem

以下は、jqueryオブジェクトの代わりにdom要素をとるJquery 2.1.1に適合したメソッドです（jqueryは不要です）。型チェックと正規表現式が含まれます。

function addClass(element, value) {
    // Regex terms
    var rclass = /[\t\r\n\f]/g,
        rnotwhite = (/\S+/g);

    var classes,
        cur,
        curClass,
        finalValue,
        proceed = typeof value === "string" && value;

    if (!proceed) return element;

    classes = (value || "").match(rnotwhite) || [];

    cur = element.nodeType === 1
        && (element.className
                ? (" " + element.className + " ").replace(rclass, " ")
                : " "
        );

    if (!cur) return element;

    var j = 0;

    while ((curClass = classes[j++])) {

        if (cur.indexOf(" " + curClass + " ") < 0) {

            cur += curClass + " ";

        }

    }

    // only assign if different to avoid unneeded rendering.
    finalValue = cur.trim();

    if (element.className !== finalValue) {

        element.className = finalValue;

    }

    return element;
};
2
Aleksandr Albert

getElementsByClassName()はHTMLCollectionを返すので、これを試すことができます

var button = document.getElementsByClassName("navButton")[0];

編集

var buttons = document.getElementsByClassName("navButton");
for(i=0;buttons.length;i++){
   buttons[i].onmouseover = function(){
     this.className += ' active' //add class
     this.setAttribute("src", "images/arrows/top_o.png");
   }
}
0
Arda

これらの種類のカスタムの「foreach」関数を使用するのが好きです。

function Each( objs, func )
{
    if ( objs.length ) for ( var i = 0, ol = objs.length, v = objs[ 0 ]; i < ol && func( v, i ) !== false; v = objs[ ++i ] );
    else for ( var p in objs ) if ( func( objs[ p ], p ) === false ) break;
}

（上記の関数を見つけた場所を思い出せませんが、非常に便利です。）

次に、オブジェクトをフェッチした後（この例ではelementsに）、次のようにします。

Each( elements, function( element )
{
    element.addEventListener( "mouseover", function()
    {
        element.classList.add( "active" );
        //element.setAttribute( "class", "active" );
        element.setAttribute( "src", "newsource" );
    });

    // Remove class and new src after "mouseover" ends, if you wish.
    element.addEventListener( "mouseout", function()
    {
        element.classList.remove( "active" );
        element.setAttribute( "src", "originalsource" );
    });
});

classList は、要素のクラスを処理する簡単な方法です。いくつかのブラウザにはシムが必要です。 setAttributeを使用する必要がある場合、設定されているものは何でもwillが以前の値を上書きすることを覚えておく必要があります。

編集：いくつかのIEバージョンではattachEventの代わりにaddEventListenerを使用する必要があることを忘れていました。 if ( document.addEventListener ) {...}でテストします。

0
ojrask

ECMAScript 5th Editionには、配列のforEachループが組み込まれています。

var buttons = document.getElementsByClassName("navButton");

Array.prototype.forEach.call(buttons,function(button) { 
    button.setAttribute("class", "active");
    button.setAttribute("src", "images/arrows/top_o.png"); 
});
0
ketan

関数の先頭にクラス名を追加するだけで、2番目と3番目の引数はオプションであり、魔法はあなたのために行われます！

function getElementsByClass(searchClass, node, tag) {

  var classElements = new Array();

  if (node == null)

    node = document;

  if (tag == null)

    tag = '*';

  var els = node.getElementsByTagName(tag);

  var elsLen = els.length;

  var pattern = new RegExp('(^|\\\\s)' + searchClass + '(\\\\s|$)');

  for (i = 0, j = 0; i < elsLen; i++) {

    if (pattern.test(els[i].className)) {

      classElements[j] = els[i];

      j++;

    }

  }

  return classElements;

}
0
Yoni