Question

在我的文字冒险游戏中，有两种选择 - 1.拿起棍子或2.留在那里。你只能选择一个，所以我想知道如何在点击一个按钮后隐藏这两个按钮。这是当前的代码：

<script>
function one()
{
var newButton1 = '<button onclick="two()">Pick up stick</button>'; var newButton2 = '<button onclick="three()">Leave it there</button>';
document.getElementById("a").innerHTML="You feel something on the ground, and you think it's a stick."+newButton1+newButton2;
}

function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something."; 
}

function three()
{
document.getElementById("c").innerHTML="You leave the stick on the ground and continue on.";
}
</script>

<div style="margin-left:15px; width:200px; margin-top:100px;">
<button onclick="one()">Feel around the cave</button>
</div>

<div style="margin-left:255px; width:200px; margin-top:-15px;">
</div>

<div id="entire" style="margin-left:490px; margin-top:-22px; width:400px; height:600px;"><div id="c"></div><div id="b"></div><div id="a"></div></div>

Answer 1

您可以给出按钮ID，然后将其显示属性设置为隐藏：

function hideButtons()
{
  document.getElementById("pickUpStick").style.display = 'none';
  document.getElementById("leaveStick").style.display = 'none';
}

function name()
{
  ...
  hideButtons();
}

<button id="pickUpStick" ... 
<button id="leaveStick" ...

Answer 2

您需要为这些按钮指定一个ID，当您点击一个按钮时，您隐藏了两个按钮。

在此处查看：http://jsfiddle.net/EPKM7/

代码：

<script>
function one()
{
//create buttons and give id to it (btnTwo and btnThree)
var newButton1 = '<button id="btnTwo" onclick="two()" >Pick up stick</button>'; 
var newButton2 = '<button id="btnThree" onclick="three()">Leave it there</button>';

document.getElementById("a").innerHTML="You feel something on the ground, and you think it's a stick."+newButton1+newButton2;
}

function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something."; 

    //Clicked, hide both buttons
    document.getElementById("btnTwo").style.display = 'none';
    document.getElementById("btnThree").style.display = 'none';


}

function three()
{
document.getElementById("c").innerHTML="You leave the stick on the ground and continue on.";
    //Clicked, hide both buttons
    document.getElementById("btnTwo").style.display = 'none';
    document.getElementById("btnThree").style.display = 'none';
}
</script>

<div style="margin-left:15px; width:200px; margin-top:100px;">
<button onclick="one()">Feel around the cave</button>
</div>

<div style="margin-left:255px; width:200px; margin-top:-15px;">
</div>

<div id="entire" style="margin-left:490px; margin-top:-22px; width:400px; height:600px;"><div id="c"></div><div id="b"></div><div id="a"></div></div>

Answer 3

此外，正如人们已经提到过的附件一样。您可以使用jQuery轻松地在一行中完成此操作。为两个按钮提供相同的类名，“按钮隐藏”或类似的东西。然后，在删除按钮功能中调用：

$(".button-hide").attr('style', 'display: none');

单击一个按钮时如何隐藏两个按钮？

3 个答案: