javascript - 如何用单词隐藏整行文本

Question

当我在游戏中隐藏宠物时，我尝试遵循这种格式，但结果并不一样。

如何隐藏这样的一行？我知道如何隐藏单选按钮。

我已经尝试过类似于我为单选按钮所做的事情，但结果并不一样。如何为这些文本行/其他内容命名，以便我可以隐藏直到满足条件？

这是我当前的 Javascript:

var Silver = document.getElementById('Silver');
var Gold = document.getElementById('Gold');
var Diamond = document.getElementById('Diamond');



function checkUnlockOre() {
    if (Mininglv >= 10) {
        Silver.style.visibility = 'visible'
    } else {
        Silver.style.visibility = 'hidden'
    }
     if (Mininglv >= 20) {
        Gold.style.visibility = 'visible'
    } else {
         Gold.style.visibility = 'hidden'
    }
    if (Mininglv >= 30) {
         Diamond.style.visibility = 'visible'
    } else {
        Diamond.style.visibility = 'hidden'
    }

}

checkUnlockOre()

HTML代码:

<div>
    <br />
    Bronze: <span id="Bronze">0</span>
    <br />
    Silver: <span id="Silver">0</span>
    <br />
    Gold: <span id="Gold">0</span>
    <br />
    Diamond: <span id="Diamond">0</span>
</div>

我希望矿石在满足条件之前不可见，但我的实际结果是它们都是可见的，我不知道如何隐藏这些线。

Answer 1

添加父跨度并根据条件隐藏完整部分。

var Silver = document.getElementById('Silver');
var Gold = document.getElementById('Gold');
var Diamond = document.getElementById('Diamond');

var SilverParent = document.getElementById('SilverParent');
var GoldParent = document.getElementById('GoldParent');
var DiamondParent = document.getElementById('DiamondParent');

var Mininglv = 5;
function checkUnlockOre() {
    if (Mininglv >= 10) {
        SilverParent.style.visibility = 'visible'
    } else {
        SilverParent.style.visibility = 'hidden'
    }
     if (Mininglv >= 20) {
        GoldParent.style.visibility = 'visible'
    } else {
         GoldParent.style.visibility = 'hidden'
    }
    if (Mininglv >= 30) {
         DiamondParent.style.visibility = 'visible'
    } else {
        DiamondParent.style.visibility = 'hidden'
    }

}

checkUnlockOre()

<br />
  <span id="BronzeParent">
  Bronze: <span id="Bronze">0</span>
   <br />
  </span>
  
  <span id="SilverParent">
  Silver: <span id="Silver">0</span>
  <br />
  </span>
  
  <span id="GoldParent">
  Gold: <span id="Gold">0</span>
  <br />
  </span>
  
  <span id="DiamondParent">
  Diamond: <span id="Diamond">0</span>
  </span>
</div>