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

Answer 2

正如Mike Willis提到的那样，您已经定义了两次相同的功能，这导致了问题，我知道您想根据代码更改按钮的标签，然后您应该更改innerHTML而不是value。

function setVisibility(id) {
    if (document.getElementById('button').innerHTML == 'Close' && id=="layer") {
        document.getElementById('button').innerHTML = 'Open';
        document.getElementById(id).style.display = 'none';
    } else if (document.getElementById('button').innerHTML == 'Open' && id=="layer") {
        document.getElementById('button').innerHTML = 'Close';
        document.getElementById(id).style.display = 'inline';
    } else if (document.getElementById('button_2').innerHTML == 'Close' && id=="layer_2") {
        document.getElementById('button_2').innerHTML = 'Open';
        document.getElementById(id).style.display = 'none';
    } else {
        document.getElementById('button_2').innerHTML = 'Close';
        document.getElementById(id).style.display = 'inline';
    }
}

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

显示/隐藏图层onclick不一致

2 个答案: