0

リンクをクリックすると、「選択された」すべてのクラスが削除され、クリックされたリンクのみが選択されたクラスに関連付けられます 

window.onload = function() {
    var link = document.getElementById('subMenu').getElementsByTagName('a');

    for(var i = 0; i < link.length; i++) {
          link[i].onclick = function() {
              link.removeAttribute('class');
              this.setAttribute('class', 'selected');
          }
    }
}

ファイアーバグ:

TypeError: link.removeAttribute is not a function
link.removeAttribute('class');
4

1 に答える 1

3

linkは から取得したコレクションで.getElementsByTagName('a')、メソッドはありませんremoveAttribute。ループ内の特定のアイテムを参照するには、次を使用する必要があります。

this.removeAttribute("class");

コレクションをループしてコレクション内の各項目を変更するという概念を既に理解しており、thisforを使用しているため、変更中のコレクション内の現在の項目を参照するためにsetAttribute()引き続き使用する必要があります。this

イベント ハンドラー内の の値はthis、イベントがバインドされている要素を参照します。これは、変更したいと思われる (そして既に変更されている) 要素です。

また、class属性を削除してすぐに再設定するため、コードのポイントが正確にはわかりません。本当に属性を設定する必要がある場合は、そもそも削除する必要はありません。を変更/設定するだけの場合はclass、次を使用します。

this.className = "selected";

編集ごとに、次を使用することをお勧めします。

window.onload = function() {
    var link = document.getElementById('subMenu').getElementsByTagName('a');

    for (var i = 0; i < link.length; i++) {
        link[i].onclick = linkClickHandler;
    }
};

function linkClickHandler() {
    var links = document.getElementById("subMenu").getElementsByTagName("a");
    for (var i = 0; i < links.length; i++) {
        if (links[i] !== this) {
            links[i].className = "";
        } else {
            links[i].className = "selected";
        }
    }
}

clickこれにより、見つかったすべての要素のハンドラーがバインドされます。ハンドラーでは、すべての元の要素をループします。クリックされた要素のclassasを設定し、他のすべての要素の as を設定します。"selected"class""

于 2013-05-03T23:55:23.987 に答える