如何用单词隐藏整行文本

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>