Question

我已经完成了如何禁用和启用标签页的操作。但是现在我想隐藏元素，这样当玩家解锁某些东西时会更有回报。

我已经尝试过了：

<div id="turtle" style="visibility: hidden;">
                <label class="radio">
                    <input type="radio" name="turtle">
                </label><img src="turtle.jpg" alt="Smiley face" 
height="42" width="42"></div>
            <br />

让宠物消失：

然后为每只宠物解锁时制作一个JavaScript脚本，以使其可见，但无法正常工作。

我想，既然重生是4（这是为了测试它是否正常工作于0开始），所以我的乌龟将是唯一被发现的。

这是我的JavaScript代码：

 rebirths = 4

function checkUnlock() {
    if (rebirths >= 4) {
        document.getElementById("turtle").visibility = "visible";
    } else {
        document.getElementById("turtle").visibility = "hidden";
    }

    if (Magiclv >= 10) {
        document.getElementById("lizard").visibility = "visible";
    } else {
        document.getElementById("lizard").visibility = "hidden";
    }

    if (wolf >= 1) {
    document.getElementById("wolf").visibility = "visible";
    } else {
        document.getElementById("wolf").visibility = "hidden";
    }

  function Turtlepassive(){
      if (rebirths >= 3){


      }
  }

其余的HTML代码：

   <div class="main_container">
        <p>This is the Pets
            <br />
            <br />
            <div id="turtle" class="control">
                <label class="radio">
                    <input type="radio" name="turtle">
                </label><img src="turtle.jpg" alt="Smiley face" height="42" 
width="42"></div>
            <br />
            <br />
            <div id="lizard" class="control">
                <label class="radio">
                    <input type="radio" name="lizard">
                </label><img src="lizard.png" alt="Smiley face" height="42" 
width="42"></div>
            <br />
            <div id="wolf" class="control">
                <label class="radio">
                    <input type="radio" name="wolf">
                </label><img src="wolf.png" alt="Smiley face" height="60" 
width="60"></div>
            <br />

            <script type="text/javascript" src="Pets.js"></script>

        </p>
    </div>

我希望宠物一直藏起来直到满足他们的条件。 HTML的新手，对可见性的工作方式感到困惑。但是实际输出是它们全部被显示出来，并且与条件无关。

Answer 1

您已经快知道了，但是您需要致电document.getElementById('turtle').style.visibility = 'hidden';

一件事：您不必每次都调用document.getElementById，您可以将pet定义为变量：

const turtle = document.getElementById('turtle');
const lizard = document.getElementById('lizard');
...

if (rebirths >= 4) {
  turtle.style.visibility = 'visible'
} else {
  turtle.style.visibility = 'hidden'
}

...您甚至可以通过三元来进一步缩短该时间：

turtle.style.visibility = rebirths >= 4 ? 'visible' : 'hidden';

尝试隐藏我的游戏元素，直到满足条件为止

1 个答案: