javascript - 隐藏单选按钮直到满足条件

标签 javascript jquery html

关于 Javascript/html，我是自学的，在制作项目之前我无法隐藏我的单选按钮 https://jsfiddle.net/tmanrocks999/dfroan50/32/我基本上希望隐藏除第一行之外的所有单选按钮(Woodsword、皮 Helm 、皮靴、皮盔甲)

我确实想在这个 fiddle 中使用一个函数，但它似乎不起作用。如果有人可以帮助我隐藏除第一行之外的所有单选按钮，直到制作该项目为止，我将不胜感激。

var Strength = 0;
var Magic = 0;
var ManaPoints = 0;
var HitPoints = 0;
var StoredStrengthe = Strength;
var StoredMagic = Magic;
var StoredManaPoints = ManaPoints;
var StoredHitPoints = HitPoints;

function woodsworde() {
  if (document.getElementById("woodsword").checked) {
    Strength = Strength + 1;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}

function silversworde() {
  if (document.getElementById("silversword").checked) {
    Strength = Strength + 3;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}

function goldsworde() {
  if (document.getElementById("goldsword").checked) {
    Strength = Strength + 5;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}

function diamondsworde() {
  if (document.getElementById("diamondsword").checked) {
    Strength = Strength + 10;
    document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = StoredStrengthe
    document.getElementById("Strength").innerHTML = Strength;

  }
}



function leatherhelme() {
  if (document.getElementById("leatherhelm").checked) {
    Magic = Magic + 1;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}

function silverhelme() {
  if (document.getElementById("silverhelm").checked) {
    Magic = Magic + 3;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}

function goldhelme() {
  if (document.getElementById("goldhelm").checked) {
    Magic = Magic + 5;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}

function diamondhelme() {
  if (document.getElementById("diamondhelm").checked) {
    Magic = Magic + 10;
    document.getElementById("Magic").innerHTML = Magic;
  } else {
    Magic = StoredMagic
    document.getElementById("Magic").innerHTML = Magic;

  }
}


function leatherbootse() {
  if (document.getElementById("leatherboots").checked) {
    ManaPoints = ManaPoints + 3;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}

function silverbootse() {
  if (document.getElementById("silverboots").checked) {
    ManaPoints = ManaPoints + 5;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}

function goldbootse() {
  if (document.getElementById("goldboots").checked) {
    ManaPoints = ManaPoints + 10;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}

function diamondbootse() {
  if (document.getElementById("diamondboots").checked) {
    ManaPoints = ManaPoints + 15;
    document.getElementById("ManaPoints").innerHTML = ManaPoints;
  } else {
    ManaPoints = StoredManaPoints
    document.getElementById("ManaPoints").innerHTML = ManaPoints;

  }
}


function leatherarmore() {
  if (document.getElementById("leatherarmor").checked) {
    HitPoints = HitPoints + 1;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

function silverarmore() {
  if (document.getElementById("silverarmor").checked) {
    HitPoints = HitPoints + 3;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

function goldarmore() {
  if (document.getElementById("goldarmor").checked) {
    HitPoints = HitPoints + 5;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

function diamondarmore() {
  if (document.getElementById("diamondarmor").checked) {
    HitPoints = HitPoints + 10;
    document.getElementById("HitPoints").innerHTML = HitPoints;
  } else {
    HitPoints = StoredHitPoints
    document.getElementById("HitPoints").innerHTML = HitPoints;

  }
}

document.getElementById("woodsword").addEventListener("change",
  silversworde);
document.getElementById("woodsword").addEventListener("change",
  woodsworde);
document.getElementById("silversword").addEventListener("change",
  woodsworde);
document.getElementById("silversword").addEventListener("change",
  silversworde);
document.getElementById("goldsword").addEventListener("change",
  woodsworde);
document.getElementById("goldsword").addEventListener("change",
  goldsworde);
document.getElementById("diamondsword").addEventListener("change",
  woodsworde);
document.getElementById("diamondsword").addEventListener("change",
  diamondsworde);
document.getElementById("Strength").innerHTML = Strength;


document.getElementById("leatherhelm").addEventListener("change",
  silverhelme);
document.getElementById("leatherhelm").addEventListener("change",
  leatherhelme);
document.getElementById("silverhelm").addEventListener("change",
  leatherhelme);
document.getElementById("silverhelm").addEventListener("change",
  silverhelme);
document.getElementById("goldhelm").addEventListener("change",
  leatherhelme);
document.getElementById("goldhelm").addEventListener("change", goldhelme);
document.getElementById("diamondhelm").addEventListener("change",
  leatherhelme);
document.getElementById("diamondhelm").addEventListener("change",
  diamondhelme);
document.getElementById("Magic").innerHTML = Magic;

document.getElementById("leatherboots").addEventListener("change",
  silverbootse);
document.getElementById("leatherboots").addEventListener("change",
  leatherbootse);
document.getElementById("silverboots").addEventListener("change",
  leatherbootse);
document.getElementById("silverboots").addEventListener("change",
  silverbootse);
document.getElementById("goldboots").addEventListener("change",
  leatherbootse);
document.getElementById("goldboots").addEventListener("change",
  goldbootse);
document.getElementById("diamondboots").addEventListener("change",
  leatherbootse);
document.getElementById("diamondboots").addEventListener("change",
  diamondbootse);
document.getElementById("ManaPoints").innerHTML = ManaPoints;



document.getElementById("leatherarmor").addEventListener("change",
  silverarmore);
document.getElementById("leatherarmor").addEventListener("change",
  leatherarmore);
document.getElementById("silverarmor").addEventListener("change",
  leatherarmore);
document.getElementById("silverarmor").addEventListener("change",
  silverarmore);
document.getElementById("goldarmor").addEventListener("change",
  leatherarmore);
document.getElementById("goldarmor").addEventListener("change",
  goldarmore);
document.getElementById("diamondarmor").addEventListener("change",
  leatherarmore);
document.getElementById("diamondarmor").addEventListener("change",
  diamondarmore);
document.getElementById("HitPoints").innerHTML = HitPoints;



var silversword = 0;
document.getElementById("silversword").innerHTML = silversword;
var silverhelm = 0;
var silverboots = 0;
var silverarmor = 0;
var Silver = 500;
document.getElementById("Silver").innerHTML = Silver;
var goldsword = 0;
document.getElementById("goldsword").innerHTML = goldsword;
var goldhelm = 0;
var goldboots = 0;
var goldarmor = 0;
var Gold = 2000;
document.getElementById("Gold").innerHTML = Gold;
var diamondsword = 0;
document.getElementById("diamondsword").innerHTML = diamondsword;
var diamondhelm = 0;
var diamondboots = 0;
var diamondarmor = 0;
var Diamond = 10000;
document.getElementById("Diamond").innerHTML = Diamond;

function buySsword() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silversword = silversword + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silversword").innerHTML = silversword;
  }
  checkcraft()
}

function buyGsword() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldsword = goldsword + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldsword").innerHTML = goldsword;
  }
  checkcraft()
}

function buyDsword() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondsword = diamondsword + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondsword").innerHTML = diamondsword;
  }
  checkcraft()
}

function buyShelm() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silverhelm = silverhelm + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silverhelm").innerHTML = silverhelm;
  }
  checkcraft()
}

function buyGhelm() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldhelm = goldhelm + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldhelm").innerHTML = goldhelm;
  }
  checkcraft()
}

function buyDhelm() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondhelm = diamondhelm + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondhelm").innerHTML = diamondhelm;
  }
  checkcraft()
}

function buySboots() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silverboots = silverboots + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silverboots").innerHTML = silverboots;
  }
  checkcraft()
}

function buyGboots() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldboots = goldboots + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldboots").innerHTML = goldboots;
  }
  checkcraft()
}

function buyDboots() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondboots = diamondboots + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondboots").innerHTML = diamondboots;
  }
  checkcraft()
}

function buySarmor() {
  if (Silver >= 500) {
    Silver = Silver - 500;
    silverarmor = silverarmor + 1;
    document.getElementById("Silver").innerHTML = Silver;
    document.getElementById("silverarmor").innerHTML = silverarmor;
  }
  checkcraft()
}

function buyGarmor() {
  if (Gold >= 2000) {
    Gold = Gold - 2000;
    goldarmor = goldarmor + 1;
    document.getElementById("Gold").innerHTML = Gold;
    document.getElementById("goldarmor").innerHTML = goldarmor;
  }
  checkcraft()
}

function buyDarmor() {
  if (Diamond >= 10000) {
    Diamond = Diamond - 10000;
    diamondarmor = diamondarmor + 1;
    document.getElementById("Diamond").innerHTML = Diamond;
    document.getElementById("diamondarmor").innerHTML = diamondarmor;
  }
  checkcraft()
}


function checkcraft() {
  if (silversword < 1) {
    document.getElementById("SilverSwordBtn").disabled = false;
  } else {
    document.getElementById("SilverSwordBtn").disabled = true;
  }
  if (goldsword < 1) {
    document.getElementById("GoldSwordBtn").disabled = false;
  } else {
    document.getElementById("GoldSwordBtn").disabled = true;
  }
  if (diamondsword < 1) {
    document.getElementById("DiamondSwordBtn").disabled = false;
  } else {
    document.getElementById("DiamondSwordBtn").disabled = true;
  }
  if (silverhelm < 1) {
    document.getElementById("SilverHelmBtn").disabled = false;
  } else {
    document.getElementById("SilverHelmBtn").disabled = true;
  }
  if (goldhelm < 1) {
    document.getElementById("GoldHelmBtn").disabled = false;
  } else {
    document.getElementById("GoldHelmBtn").disabled = true;
  }
  if (diamondhelm < 1) {
    document.getElementById("DiamondHelmBtn").disabled = false;
  } else {
    document.getElementById("DiamondHelmBtn").disabled = true;
  }
  if (silverboots < 1) {
    document.getElementById("SilverBootsBtn").disabled = false;
  } else {
    document.getElementById("SilverBootsBtn").disabled = true;
  }
  if (goldboots < 1) {
    document.getElementById("GoldBootsBtn").disabled = false;
  } else {
    document.getElementById("GoldBootsBtn").disabled = true;
  }
  if (diamondboots < 1) {
    document.getElementById("DiamondBootsBtn").disabled = false;
  } else {
    document.getElementById("DiamondBootsBtn").disabled = true;
  }
  if (silverarmor < 1) {
    document.getElementById("SilverArmorBtn").disabled = false;
  } else {
    document.getElementById("SilverArmorBtn").disabled = true;
  }
  if (goldarmor < 1) {
    document.getElementById("GoldArmorBtn").disabled = false;
  } else {
    document.getElementById("GoldArmorBtn").disabled = true;
  }
  if (diamondarmor < 1) {
    document.getElementById("DiamondArmorBtn").disabled = false;
  } else {
    document.getElementById("DiamondArmorBtn").disabled = true;
  }
}

checkcraft()


var silverswordr = document.getElementById('silverswordr');
var goldswordr = document.getElementById('goldswordr');
var diamondswordr = document.getElementById('diamondswordr');

function checkWunlock() {
  if (silversword < 1) {
    silverswordr.style.visibility = 'hidden'
  } else {
    silverswordr.style.visibility = 'visible'
  }
  if (goldsword < 1) {
    goldswordr.style.visibility = 'hidden'
  } else {
    goldswordr.style.visibility = 'visible'
  }
  if (diamondsword < 1) {
    diamondswordr.style.visibility = 'hidden'
  } else {
    diamondswordr.style.visibility = 'visible'
  }

}

checkWunlock()

//document.getElementById("").addEventListener("change", checkWunlock);
<html>

<head>
  <title> Basic Clicker</title>
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <div class="nav_bar">
    <ul>
      <li id="HomeTab"><a href="GameMainWindow.html">Home</a></li>
      <li id="SkillTreeTab"><a href="SkillTree.html">SkillTree</a></li>
      <li id="EquipmentTab"><a href="Equipment.html" id="onlink">Equipment</a></li>
      <li id="PetsTab"><a href="Pets.html">Pets</a></li>
      <li id="SkillsTab"><a href="Skills.html">Skills</a></li>
      <li id="QuestsTab"><a href="Quests.html">Quests</a></li>
      <li id="ShopTab"><a href="Shop.html">Shop</a></li>
    </ul>
  </div>
  <div class="main_container">

    <div id="Equipmentradios" style="width: 500px; float:left; ">
      <p>
        <font size="+2"> <b> Equipment </b></font>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <br />
        <br /> Wood Sword<input id="woodsword" type="radio" name="Sword"> Silver Sword<input id="silversword" type="radio" name="Sword"> Gold Sword<input id="goldsword" type="radio" name="Sword"> Diamond Sword<input id="diamondsword" type="radio" name="Sword">
        <label class="radio">
                <br>
            Leather Helm <input id="leatherhelm"   type="radio" name="Helm">
            Silver Helm <input id="silverhelm"   type="radio" name="Helm">
            Gold Helm <input id="goldhelm"   type="radio" name="Helm">
            Diamond Helm <input id="diamondhelm"   type="radio" name="Helm">
                <label class="radio">
                <br>
            Leather Boots <input id="leatherboots"   type="radio" name="Boots">
            Silver Boots <input id="silverboots"   type="radio" name="Boots">
            Gold Boots <input id="goldboots"   type="radio" name="Boots">
            Diamond Boots <input id="diamondboots"   type="radio" name="Boots">
                <label class="radio">
                <br>
            Leather Armor <input id="leatherarmor"   type="radio" name="Armor">
            Silver Armor <input id="silverarmor"   type="radio" name="Armor">
            Gold Armor <input id="goldarmor"   type="radio" name="Armor">
            Diamond Armor <input id="diamondarmor"   type="radio" name="Armor">
                <label class="radio">
                <br>
                    </div>
                    
            <div id="crafting" style="width: 350px;   float:right;position: absolute; left: 650px; top: 115px; border: 15px solid green; height:300px; background:white; position: absolute; left: 600px; top: 115px; margin:10px">
                    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font size="+2"> <b>Forge</b>
                    <br />
                    <font size="-2"> Silver Sword &nbsp;<button id="SilverSwordBtn" onclick="buySsword()">Craft</button> <font size="-2"> Gold Sword &nbsp;<button id="GoldSwordBtn" onclick="buyGsword()">Craft</button> <font size="-2"> Diamond Sword &nbsp;<button id="DiamondSwordBtn" onclick="buyDsword()">Craft</button>
                    <br />
                    <font size="-2"> Silver Helm &nbsp; &nbsp;<button id="SilverHelmBtn" onclick="buyShelm()">Craft</button> <font size="-2"> Gold Helm &nbsp;&nbsp;&nbsp;<button id="GoldHelmBtn" onclick="buyGhelm()">Craft</button> <font size="-2"> Diamond Helm &nbsp;&nbsp;<button id="DiamondHelmBtn" onclick="buyDhelm()">Craft</button>
                    <br />
                    <font size="-2"> Silver Boots &nbsp;&nbsp;<button id="SilverBootsBtn" onclick="buySboots()">Craft</button> <font size="-2"> Gold Boots &nbsp;&nbsp;<button id="GoldBootsBtn" onclick="buyGboots()">Craft</button> <font size="-2"> Diamond Boots &nbsp;<button id="DiamondBootsBtn" onclick="buyDboots()">Craft</button>
                    <br />
                    <font size="-2"> Silver Armor &nbsp;<button id="SilverArmorBtn" onclick="buySarmor()">Craft</button> <font size="-2"> Gold Armor &nbsp;&nbsp;<button id="GoldArmorBtn" onclick="buyGarmor()">Craft</button> <font size="-2"> Diamond Armor &nbsp;<button id="DiamondArmorBtn" onclick="buyDarmor()">Craft</button>
                    <br />
                    Strength+<span id="Strength">0</span>
                    Magic+<span id="Magic">0</span>
                    ManaPoints+<span id="ManaPoints">0</span>
                    HitPoints+<span id="HitPoints">0</span>
                    <br />
                    Silver= <span id="Silver">0</span>  <span id="silversword">0</span>
                    <br />
                    Gold= <span id="Gold">0</span>     <span id="goldsword">0</span>
                    <br />
                    Diamond= <span id="Diamond">0</span>  <span id="diamondsword">0</span>
                        </div>
                    
                   
       
        
                    
                <script type="text/javascript" src="Pets.js"></script>
                <script type="text/javascript" src="main.js"></script>
                <script type="text/javascript" src="Equipment.js"></script>
                <p>
     </div>

    </body></html>

一切都应该在那个 fiddle 里。我尝试的是在带有 checkWunlock 的按钮上，用于检查是否制作了武器。我希望除了第一行之外的所有单选按钮在制作之前都是隐藏的，但是我的所有单选按钮的实际输出都是可见的，因此玩家可以在开始时使用任何设备。我禁用了工艺按钮，所以我很困惑为什么隐藏的东西也不起作用。如果我能找到隐藏我的单选按钮的有效方法，我将不胜感激。

最佳答案

我已经修改了你的代码。

html

<input type="radio" name="Type" value="flat" id="flatRadio" />Wood Sword
<input type="radio" name="Type" value="salary" id="salaryRadio" />Silver Sword

<br />
<div id="wordSword" class="options">Wood Sword:
    Leather Helm <input id="leatherhelm"   type="radio" name="Helm">
            Silver Helm <input id="silverhelm"   type="radio" name="Helm">
            Gold Helm <input id="goldhelm"   type="radio" name="Helm">
            Diamond Helm <input id="diamondhelm"   type="radio" name="Helm"></div>
<div id="silverSword" class="options">Silver Sword:
     Leather Boots <input id="leatherboots"   type="radio" name="Boots">
            Silver Boots <input id="silverboots"   type="radio" name="Boots">
            Gold Boots <input id="goldboots"   type="radio" name="Boots">
            Diamond Boots <input id="diamondboots"   type="radio" name="Boots"></div>

CSS

.options {
display:none;

有关更多代码，请访问 demo完整代码

希望能帮到你

关于javascript - 隐藏单选按钮直到满足条件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57405068/

上一篇：javascript - 如何在我的代码中修复 addEventListener？好像随时取消

下一篇：javascript - 'this' 在生命周期方法中如何工作？

相关文章：

javascript - Angular : Resolving promise objects based on value

javascript - 为什么我们不能在 jquery 中按值获取对象

javascript - 单击触发时框关闭

javascript - 如何在窗口调整大小时覆盖我的数组？

javascript - 从第一个下拉列表中选择后，如何将 li 值填充到另一个下拉列表中？

html - 如何使 iframe 内容适合且可滚动？

javascript - 循环遍历路由以获取单个值并将其推送到变量

javascript - 如何使用通过 javascript 创建的 Coldfusion 删除 Cookie，反之亦然？

html - 图片顶部的 CSS block

javascript - 是否可以在 KonvaJS 的形状/组上捕获右键单击事件？

©2024 IT工具网  联系我们