2

私が取り組んでいるJavaScript関数と戦っています。

for ループ内では、クラスが「visible」であるすべての要素を反復処理しています。そのループ内では、2 つのアクションを実行しています。

  1. elements[i].removeAttribute("クラス");
  2. elements[i].setAttribute("class", "hidden");

なぜか1だけ有効。2 次のエラーが表示されます。

Uncaught TypeError: Cannot call method 'setAttribute' of undefined

console.log; を使用して要素 [i] をログに記録した場合でも、最初の console.log 呼び出しの後、要素は存在しますが、2 番目の console.log 要素 [i] は「未定義」です

ここで何が欠けているのか、これは私を夢中にさせています。私のラップトップがそれほど高価でなければ、今頃壊れていたでしょう。ヘルプ ：（

関数は次のとおりです。

function hide_visable_elements()
{
    // remove body EventListener
    var body = document.getElementsByTagName("body");
    body[0].removeEventListener("click", hide_visable_elements, true);

    var elements = document.getElementsByClassName("visible");

    for (var i = 0; i < elements.length; i++)
    {
        console.log(elements[i]); // Works like a swiss clock

        elements[i].removeAttribute("class"); 

        console.log(elements[i]); // why elements[i] is 'undefined' now ???

        elements[i].setAttribute("class", "hidden"); // << turns to useless code
    }
}
4

3 に答える 3

6

これは、liveである をgetElementsByClassName返すためです。つまり、参照する要素が変更されると、それ自体が更新されます。NodeList

classの要素から属性を削除すると、そのリストから削除されます (クラス名NodeListがなくなったため)。visible

実際に属性を削除する必要はありません。設定するだけで、同じように機能します。ただし、NodeList含まれる要素を操作すると が変化するため、逆方向にカウントする必要があります (要素を 1 つ変更するたびに要素が削除され、長さが 1 つ減少します)。

for (var i = elements.length - 1; i >= 0; i--) {
    elements[i].setAttribute("class", "hidden");
}
于 2013-07-23T10:31:58.403 に答える
1

elements[i].removeAttribute("class"); class を使用して要素を選択したため、問題が発生したと思いますgetElementsByClassName("visible");。要素からクラス属性を完全に削除すると、問題が発生すると思います。

コードを微調整してみてください。class 属性を使用して選択された同じ要素を使用する予定がある場合は、属性 class を削除する必要はありません。

于 2013-07-23T10:33:37.897 に答える
1

getElementsByClassNameライブNodeListなので、アイテムを変更するclassNameとすぐにリスト全体に影響します。代わりにquerySelectorAllを使用することをお勧めします。

var body = document.getElementsByTagName("body");使用する代わりにプラスdocument.body。

于 2013-07-23T10:34:17.523 に答える