0

フロントエンド開発者としての学習プロセスの一環として、jQuery を使用せずに製品を作成し、代わりにバニラ JavaScript を使用してすべてのやり取りを行うことにしました。

関数 onClick を呼び出して、クリックしたクラスの一部である DOM ノードのみの位置を取得したいと考えています。ただし、これが純粋な JavaScript でどのように行われるかはわかりません。基本的に、$(this) が jQuery で行うことを複製したいと考えています。

これまでの私のコードは次のとおりです。

function expand(name) {
    var elem = document.querySelectorAll(name)

for (var i = 0; i < elem.length; i++) {
    var rect = elem[i].getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);
    }
}

document.querySelectorAll(".box").onclick = expand(this)

事前に感謝し、問題に対する他の可能な解決策は大歓迎です。

4

2 に答える 2

2

  • document.querySelectorAllNodeListを返します。これは配列に似ており、反復する必要があります

  • ハンドラー内で使用thisして、ハンドラーがアタッチされているノードを参照できます

  • イベントをリッスンするバニラの方法はEventTarget.addEventListener、これは一度に1つのイベントタイプのハンドラーのみをアタッチするため、複数を使用できるようにしたい場合は、ここで再度ループする必要があります（例ではこれを行いませんでしたただし、jQuery ではこれを行うことができます)

function expand() {
    var rect = this.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);
}

function nodeListOn(list, type, handler, useCapture) {
    var i, t;
    type = type.split(/s+/);
    for (i = 0; i < list.length; ++i) {
        for (t = 0; t < type.length; ++t) {
            list[i].addEventListener(type[t], handler, useCapture);
        }    
    }
}

var nodes = document.querySelectorAll('.box');
nodeListOn(nodes, 'click', expand);
于 2015-07-06T19:49:35.870 に答える