Question

我有两个<button>标签，如下所示：

<button id="functionyes" onclick="functionYes()">Yes</button>

<button id="functionno" onclick="functionNo()">No</button>

它们链接到这样的函数：

function functionNo() {
    var x = document.getElementById("functionyes");
    if (x.style.display === "none") {
        x.style.display = "block";
        document.getElementById("functionno").disabled = true;
    } else {
        x.style.display = "none";
        document.getElementById("functionno").disabled = false;
    }
}

function functionYes() {
    var x = document.getElementById("functionno");
    if (x.style.display === "none") {
        x.style.display = "block";
        document.getElementById("functionyes").disabled = true;
    } else {
        x.style.display = "none";
        document.getElementById("functionyes").disabled = false;
    }
}

这些函数将<div>这样从可见切换为不可见：

<div style="display:none" id="functionYes">
    Yes
  </div>

<div style="display:none" id="functionNo">
    No
 </div>

因此，这是您单击“是”按钮时所执行的操作，它将触发该函数，其中显示“是”文本。然后，该功能禁用“否”按钮，直到您将“是”文本切换回去。反之亦然。

尽管此功能有效，但这并不是我真正想做的。我想要按钮而不是禁用另一个按钮，这会使另一个按钮的文本消失。因此，如果显示的是“是”文本，则可以单击“否”按钮，使“是”文本消失，然后显示“否”文本。

Answer 1

简化您的代码，只需传递您想要显示的内容和想要隐藏的内容即可。

New.df

function showHide(show, hide) {
  document.getElementById(show).style.display = "block"
  document.getElementById(hide).style.display = "none"
}

Answer 2

考虑使用jQuery，它使这样的操作变得非常容易：

<button id="yes">Yes</button>
<button id="no">No</button>

<div id="yes-div">Yes</div>
<div id="no-div">No</div>

<script>
    $('#yes').click( () => {
        $('#yes-div').show();
        $('#no-div').hide();
    });
    $('#no').click( () => {
        $('#no-div').show();
        $('#yes-div').hide();
    });
</script>

如何制作两个<button>标记，其中一个触发文本并删除另一个文本？

2 个答案: