Question

从服务器收到未知数量的字符串数组后，我试图将每个数组打印为一个表，每个表都应该有显示或不显示的选项。 JS函数，使表和HIDE / SHOW按钮：

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);

}

我还写了这个函数hide / show table：

 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

如果button.id是您尝试传递给该函数的参数，则可以按如下方式重写代码：

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

Answer 2

鉴于您编写的代码是正确的，它应该足以更改您的showHide函数，以便它本身返回一个新函数。这样，您可以轻松地创建相同onclick回调函数的不同“版本”。

function showHide(name){
// return a callback where the name is already set
  return function() {
    var str = name + "Table" ;
    var x = document.getElementById(str);
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
  };
}

然后，在循环中，调用此函数为每个表生成一个新的回调。

button.onclick = showHide(name);

Answer 3

说明

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

代码

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

小技巧.. 使用ternary operator

可以缩短if statement

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>

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

3 个答案:

说明

代码

实施例