javascript - 显示/隐藏层 onclick 不一致

Question

我有下面的 javascript，它会在单击按钮时显示和隐藏图层。但是，我在同一页面上安装了其中的 2 个，并且在这种情况下关闭/打开不能有效地工作

function setVisibility(id) {
    if (document.getElementById('button').value == 'Close') {
        document.getElementById('button').value = 'Open';
        document.getElementById(id).style.display = 'none';
    } else {
        document.getElementById('button').value = 'Close';
        document.getElementById(id).style.display = 'inline';
    }
}

function setVisibility(id) {
    if (document.getElementById('button_2').value == 'Close') {
        document.getElementById('button_2').value = 'Open';
        document.getElementById(id).style.display = 'none';
    } else {
        document.getElementById('button_2').value = 'Close';
        document.getElementById(id).style.display = 'inline';
    }
}

http://codepen.io/anon/pen/EadRvW

如果你点击每个打开按钮，你会看到点击一个按钮后，另一个按钮需要点击2次才能成功打开图层。关闭它们也一样。交替单击每个“打开”按钮，显示它们在单击时没有做出应有的响应。

我不确定需要做什么才能让他们一起工作。当页面上只有 1 个时，它们工作正常。有人看到问题了吗？

Answer 1

您定义了相同的函数 (setVisibility) 两次，因此第一个定义被第二个定义替换。

像这样设置您的 javascript 可以解决问题:

编辑:我更喜欢这个版本，我也设置它来更改按钮文本:

function setVisibility(id) {
    var targetButton;
    switch( id ) {
    case "layer":
        targetButton = "button";
        break;
    case "layer_2":
        targetButton = "button_2";
        break;
    }
    if (document.getElementById(targetButton).value == 'Close') {
        document.getElementById(targetButton).innerHTML = 'Open';
        document.getElementById(targetButton).value = 'Open';
        document.getElementById(id).style.display = 'none';
    } else {
        document.getElementById(targetButton).innerHTML = 'Close';
        document.getElementById(targetButton).value = 'Close';
        document.getElementById(id).style.display = 'inline';
    }
}

http://codepen.io/anon/pen/JomBbm