0

私はゆっくりと jQuery からバニラ JS への道を進んでいますが、JavaScript で次のコードを書きたくて苦労しています。要素ごとに「for」ループを設定する必要がありますか? 子要素を ID でターゲットにするにはどうすればよいですか?

これが私が理解したいことです：

$('#id li').click(function(){
    $(this).addClass('active');
});

ドキュメント getElementById が「#id」を取得することは理解していますが、子 <li> 要素を取得するにはどうすればよいですか? そして、クリックされたリスト要素に対して「onclick」機能を機能させるにはどうすればよいですか? 要素ごとに「for」ループを設定する必要がありますか? どんな助けでも大歓迎です！

4

3 に答える 3

2

ここにあなたが望むことをするJSFiddleがあります：
http://jsfiddle.net/digitalzebra/ZMXGC/10/

(function() {
    var wrapper = document.getElementById("id");
    var clickFunc = function(event) {
        var target = event.originalTarget || event.target;

        target.className = "active";
    };

    wrapper.addEventListener("click",clickFunc);
})();

少し説明が整いました...

まず、自己実行関数を使用してラッパー div を取得していますgetElementById()。これは、jQuery で id セレクターを使用するのと同じです。$('#id')

次に、関数を使用して要素にクリック ハンドラーをアタッチaddEventListener()し、イベント タイプ を渡しclickます。

これは、jQuery の場合と同じように、クリック ハンドラー関数を div 要素にバインドしますclick()。イベントバブリングと呼ばれるものを使用しています。これは、ラッパーの子のいずれかのクリックイベントが、ラッパーに添付されたクリックハンドラーを呼び出します。

ユーザーが要素をクリックすると、関数が呼び出されます。 originalTargetortargetはユーザーが実際にクリックした要素で、この場合は常にli. 次に、その要素のクラスをアクティブに設定します。

于 2013-02-02T21:50:16.293 に答える
1

上記の質問の例を次に示します http://jsfiddle.net/G3ADG/2/

    (function() {
    var id = document.getElementById("id");
    var liele = id.getElementsByTagName("li");
    for (var i = 0; i < liele.length; i++) {
        liele[i].addEventListener("click", function () {
            this.className = "active";
        })

    }
})();

彼は内部でループを使用していないので、Polaris878 ソリューションが本当に気に入りました。私のソリューションでは、最初に document.getElementById を使用して HTML ノード情報を取得します。これは $("#id") と同様に機能します。次のステップでは、「id」の子である「li」のすべてのタグタイプを取得しています。このliタグ配列では、クリック機能をリッスンするイベントリスナーを追加しています

className は、そのノードにクラスを追加できる属性の 1 つです。

上記のコードを mozilla と chrome でテストしました

于 2013-02-02T22:27:41.160 に答える
0

これは機能します (IE >= 10)。classList.add() を IE<10 の代わりに検索したくありません。

var elems = document.querySelectorAll('#id li');
for (var i = 0; i < elems.length; i++) {
    var elem=elems[i];
    elem.addEventListener("click", function (e) {

        this.classList.add('active');
    });
}

フィドル

于 2013-02-02T22:03:22.407 に答える