Übergeben eines Werts an onclick anonyme JavaScript-Funktion

Question

Ziel: Mehrere Schaltflächen mit den vollständigen Produktspezifikationen haben, die die Sichtbarkeit ihrer jeweiligen Produktspezifikationstabellen umschalten müssen. Setzen Sie zunächst alle Produktspezifikationstabellen auf NICHT anzeigen und verwenden Sie dann die zu steuernden Schaltflächen. Kann nicht jQuery verwenden, weil ... Gründe/dumme alte Website Ich habe keine volle Kontrolle über ...

Ich versuche, eine anonyme JavaScript-Funktion zu verwenden, aber ich bin unsicher, wie in meiner Tabelle übergeben? Oder wenn ich das überhaupt kann? Mein JS ist nicht so toll ...

Mit jQuery könnte ich wahrscheinlich einfach .click() und .closes() verwenden. Ich bin mir nicht sicher, wie ich in pures JavaScript übersetze, also habe ich das stattdessen.

Der Fehler ...

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

Und der Code ...

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"; 
    } 
} 

Und die HTML in dem Fall, dass jemand

<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

Eine einfache, effiziente Lösung hilft, ist nur um den Index jedes Elements auf dem Element selbst zu speichern, so dass Sie beim Aufruf des Handlers über diedarauf verweisen könnenVerweis auf das Element.

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

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

---

Einige dieser Verschlüsse und so zu erreichen, verwenden kann, aber es gibt keine Notwendigkeit, so kompliziert zu sein.

Wenn jeder button kommt kurz vor jedem table, dann könnte man this.nextElementSibling tun, um die table zu bekommen, aber das wird in IE8 und unteren nicht.