javascript - クリックされた要素を取得 onclick

Question

var submenus = document.getElementsByClassName("submenu");
for (var i = 0; i < submenus.length; i++) {
    submenus[i].onclick = function() {
        toggle(submenus[i].nextSibling);
        return false;
    }
}

function toggle(el) {
    if (el.style.display == 'block') {
        el.style.display = 'none';
    } else {
        el.style.display = 'block';
    }
}

エラーの原因:TypeError: submenus[i] is undefined

submenus[i]関数の範囲内ではないと思います。要素をクリックして、次の兄弟を切り替えるにはどうすればよいですか?

Answer 1

次のようになります。

  var submenus = document.getElementsByClassName("submenu");
    for (var i = 0; i < submenus.length; i++) {
        (function(i){
            submenus[i].onclick = function() {
                toggle(submenus[i].nextSibling);
                return false;
            };
        })(i);
    }

    function toggle(el) {
        if (el.style.display == 'block') {
            el.style.display = 'none';
        } else {
            el.style.display = 'block';
        }
    }

Answer 2

var submenus = document.getElementsByClassName("submenu");
for (var i = 0; i < submenus.length; i++) {
    submenus[i].onclick = (function(j) {
        return function () {
            // alert(j);
            toggle(submenus[j].nextSibling);
            return false;
        };
    })(i);
}

---

onclick関数はループの後に起動するためfor、ユーザーが目的の要素をクリックすると、要素iの になりlengthます。

<div class="submenu">Hello</div>
<div class="submenu">Hello</div>
<div class="submenu">Hello</div>
<div class="submenu">Hello</div>
<div class="submenu">Hello</div>
<div class="submenu">Hello</div>

そしてあなたのコードで：

var submenus = document.getElementsByClassName("submenu");
for (var i = 0; i < submenus.length; i++) {
    submenus[i].onclick = function() {
        alert(i);
    }
}

すべての要素を取得6します（ jsFiddleを確認してください）。i

関数i内に保持する必要があります。クロージャーが役立ちます。onclick

for (var i = 0; i < submenus.length; i++) {
    submenus[i].onclick = (function(j) {
        return function () {
            alert(j);
        };
    })(i);
}

ご覧のとおり、関数を作成してすぐに実行しました ( it というパラメーターを使用しj、各要素の値は ですi)。それを返すのは別の機能です。このjsFiddleを確認してください。