Question

目标：有多个“完整产品规格”按钮，需要切换各自产品规格表的可见性。最初，将所有产品规格表设置为NOT显示，然后使用按钮进行控制。不能使用jQuery因为...原因/愚蠢的旧网站我没有完全控制...

我正在尝试使用匿名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";
    }
}

HTML可以帮助任何人

<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

一个简单有效的解决方案就是将每个元素的索引存储在元素本身上，以便在调用处理程序时，可以通过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之前，那么您可以this.nextElementSibling进入table，但这在IE8及更低版本中无效。

将值传递给onclick匿名JavaScript函数

1 个答案: