onclickの匿名JavaScript関数への値の受け渡し

Question

目的：それぞれの製品仕様テーブルの表示を切り替える必要がある複数の「完全な製品仕様」ボタンがあります。最初に、すべての製品仕様テーブルを表示しないように設定し、ボタンを使用して制御します。私は匿名のJavaScript関数を使用しようとしていますが、私のテーブルを渡す方法は不明ですか？それとももし私ができれば？私のJSはそれほど素晴らしいものではありません...

jQueryを使うと、おそらくちょうど.click（）と.closest（）を使うことができます。純粋なJavaScriptに変換する方法がわからないので、代わりにこれを使用します。

エラー...

Uncaught TypeError: Cannot set property 'display' of undefined at HTMLButtonElement.y.(anonymous function).onclick 

とコード...

var x = document.getElementsByClassName("pdp-full-specs-table"); 
console.log("There are " + x.length + " tables"); 
for(i = 0; i < x.length; i++){ 
    x[i].style.display = "none"; 
} 

var y = document.getElementsByClassName("pdp-full-specs-toggle"); 
console.log("There are " + y.length + " toggles"); 
for(i = 0; i < y.length; i++){ 

    var pdpTable = x[i]; 
    y[i].onclick = function(pdpTable){ 

     // Make this a toggle later 
     pdpTable.style.display = "table"; 
    } 
} 

そして誰

<button type="button" class="btn btn-link pdp-full-specs-toggle">Full Specifications &rsaquo;</button><br> 
<table class="pdp-full-specs-table"> 
    <tr> 
     <td>Product Size</td> 
      <td>some size</td> 
    </tr> 
</table> 

Answer 1

簡単で、効率的な解決策があるのに役立ちます場合、HTML各要素のインデックスを要素自体に格納するだけで、ハンドラが呼び出されたときに、this要素への参照。

for(var i = 0; i < y.length; i++){ 
    y[i].__table__ = i; 
    y[i].onclick = buttonHandler; 
} 

function buttonHandler() { 
    x[this.__table__].style.display = "table"; 
} 

---

一部は、クロージャを使用することや、これを達成するために、しかしそう複雑にする必要はありません。各buttonは各table直前に付属している場合

、あなたはtableを取得するthis.nextElementSiblingを行うことができ、それはIE8と下では動作しません。