javascript - 多个 HTML 按钮调用相同的 JS 函数但具有不同的参数

Question

从服务器接收到未知数​​量的字符串数组后，我尝试将每个数组打印为表格，并且每个表格都应该具有显示或不显示的选项。制作表格和 HIDE/SHOW 按钮的 JS 函数:

function printTable(data,color,name){
    var html = "<table border='1|1' id =";
    html += "'"+name+"'" ;
    html += " style='background-color:";
    html += color + "'";
    html += ">";
    html += "<tr>";
    html += "<th>"+name+"</th>";

    html += "</tr>";
    console.log("length is: "+ data.length);
    for (var i = 0; i < data.length; i++) {
        console.log(i);
        if (data[i]) {
            html += "<tr>";
            html += "<td>" + data[i] + "</td>";

            html += "</tr>";

        }
    }
        html+="</table>";
        console.log(html);
        var table = document.createElement('table');
        table.id = name+"Table";
        table.cellSpacing = "10";
        table.innerHTML = html;
        table.setAttribute("bgcolor",color);
        table.style.display = 'block';
        var button = document.createElement('button');
        button.id = name;
        var t = document.createTextNode("Show/Hide");
        button.appendChild(t);
        button.onclick = showHide;
        var div = document.createElement('div');
        div.appendChild(table);
        div.id = name+"Div";
        div.appendChild(button);
        document.getElementById('listsDiv').appendChild(div);

}

我还编写了隐藏/显示表格的函数:

 function showHide(name){
    var str = name + "Table" ;
    var x = document.getElementById(str);
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

问题是，每个按钮的 onClick 属性都没有获得应有的功能。 如何在每个按钮中使用相同的功能，但具有不同的参数(名称)？

谢谢

Answer 1

说明

onClick内您可以访问Event目的。事件对象始终是第一个参数，并将自动传递给它。在您的情况下，name 是event 对象。 通过Event，您可以访问currentTarget - 您单击的元素。
另外，您可以在 onClick 等 eventHanlder 中使用 this 来获取当前目标。

代码

function showHide(event) {
    var elementId = event.currentTarget.getAttribute('name') + 'Table'
    // var elementId = this.getAttribute('name') + 'Table'
    var element = document.getElementById(elementId);
    var displayStyle = element.style.display
    if (displayStyle  === 'none') {
        displayStyle  = 'block';
    } else {
        displayStyle  = 'none';
    }
}

小技巧..if 语句可以用 ternary operator 写得更短

displayStyle === 'none' ? block' : 'none'

示例

document.querySelector('#btnPeter').onclick = showHideWithEvent
document.querySelector('#btnGeorg').onclick = showHideWithThis

function showHideWithEvent(event) {
    var name = event.currentTarget.getAttribute('name')
    console.log(name)
}

function showHideWithThis() {
    var name = this.getAttribute('name')
    console.log(name)
}

<button id="btnPeter" name="peter">Peter</button>
<button id="btnGeorg" name="georg">Georg</button>