时间戳

首页 > 解决方案 > 为每个单选按钮制作一个简单的真/假标志

javascript - 为每个单选按钮制作一个简单的真/假标志

问题描述

所以我想创建一个函数来查看哪个单选按钮处于活动状态，然后为每个单选按钮海龟、狼、蜥蜴等使用真/假标志处理移除该效果的效果。所以喜欢

var wolfActive = true;
var lizardActive = false;
var turtleActive = false;

然后，当您设置其中一个处于活动状态时，您将传递给一个函数并查看所有其他函数以查看它是否为真。如果是真的，减去它的值。然后将其他设置为false。

我主要希望这样做，因此当您切换单选按钮时，与这些单选按钮相关的统计信息/功能不会继续存在。当从乌龟切换到蜥蜴时，我失去了 1 种力量，这种情况不应该发生。我是 JavaScript 新手，所以这种概念我不知道如何设置才能使其工作。我会在我的代码中告诉你我的意思

我有人试图向我解释它，但我无法正确格式化它。

他说：“当单选按钮更改时，事件监听器调用一个函数，该函数确定其中哪些是活动的，然后创建一个函数来确定哪些是活动的，并为每一个进行删除部分删除是将其设置为 false 然后完成设置新的为真”

这是我的 JavaScript 代码：

 var wolfRadio = document.getElementById("wolf-radio");
 var lizardRadio = document.getElementById("lizard-radio");
 var wolfInterval;

 var Wolf = 1;
 var Wolflv = 1;
 var WolfCexp = 0;
 var WolfMexp = 100;
 var NextMaxWolfExp = WolfMexp;
 var Wolfstrength = 1;
 var Strength = 2;

 // This is an event dispatcher function. Based on the radio
 // button that was clicked, run different functions.
 function radioChanged(event) {
  if (event.target === wolfRadio) {
    wolfandstrength(true);
    wolfXpUp(true);
    // Run other functions...
  } else if (event.target === lizardRadio) {
    wolfandstrength(false);
    wolfXpUp(false);
   // Run other functions...
  }
}

function wolfandstrength(wolfChecked) {
  if (wolfChecked) {
    Strength = Strength + Wolfstrength
document.getElementById("Strength").innerHTML = Strength;
  } else {
    Strength = Strength - Wolfstrength;
    document.getElementById("Strength").innerHTML = Strength;
  }
}

function wolfXpUp(wolfChecked) {
  clearInterval(wolfInterval);

  if (wolfChecked && WolfCexp < WolfMexp) {
   wolfInterval = setInterval(function () { wolfXpUp(wolfChecked); }, 
  200);
    WolfCexp = WolfCexp + 1;
    document.getElementById("WolfCexp").innerHTML = WolfCexp;
  } 

  if (WolfCexp >= WolfMexp) {
    Wolflv = Wolflv + 1;
    WolfCexp = 0;
    Wolf = Wolf + 1;
      Wolfstrength = Wolfstrength + 1;
      Strength = Strength + 1;
       NextMaxWolfExp = NextMaxWolfExp * 1.5;
    }

    document.getElementById("Strength").innerHTML = Strength;
    document.getElementById('WolfMexp').innerHTML = NextMaxWolfExp;
   document.getElementById('Wolflv').innerHTML = Wolflv;
    document.getElementById('WolfCexp').innerHTML = WolfCexp;
    //document.getElementById('Turtle').innerHTML = Turtle; 
  }

  //document.getElementById("turtle-radio").addEventListener("change", 
  turtleXpUp);
  //document.getElementById("turtle-radio").addEventListener("change", 
  turtleandstrength);
  wolfRadio.addEventListener("change", radioChanged);
  lizardRadio.addEventListener("change", radioChanged);
  document.getElementById("Strength").innerHTML = Strength;
 <div id="turtle" class="control">
   <label class="radio">
     <input type="radio" name="Pets" id="turtle-radio">
   </label><img src="turtle.png" alt="turtle" height="100" width="100"> Lv 
   <span id="Turtlelv">1</span> <span id="TurtleCexp">0</span> / <span 
  id="TurtleMexp">100</span>
       <br />
       <br />

       <div id="lizard" class="control">
         <label class="radio">
            <input type="radio" name="Pets" id="lizard-radio">
        </label><img src="lizard.png" alt="lizard" height="42" width="42"> 
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Lv <span 
    id="Lizardlv">1</span> <span id="LizardCexp">0</span> / <span 
    id="LizardMexp">100</span>
       <br />
        <div id="wolf" class="control">
          <label class="radio">
            <input type="radio" name="Pets" id="wolf-radio">
           </label><img src="wolf.png" alt="wolf" height="60" width="60"> 
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Lv <span id="Wolflv">1</span> <span 
    id="WolfCexp">0</span> / <span id="WolfMexp">100</span></div>
       <br />
      <span id="Strength">0</span>

您可以从从 wolf 切换到 lizard 单选按钮的片段中看到效果很好，因为您从 2 强度开始。但是当你从乌龟变成蜥蜴时，我不希望你失去 1 点力量。每个单选按钮 buff 仅应在选择单选按钮时打开。（因此我想要一个好的真/假标志）。我的实际输出单选按钮功能/统计信息不直接与它们被选择相关联。我希望在一个为真时将其他单选按钮设为假将解决此问题。

标签： javascripthtml

解决方案

所以，我可能重写了太多，但我个人会走如下路线。

要定义哪个宠物获得哪个 buff，以及该 buff 有多少，请使用data attributes。例如，如果wolf应该 buff strengthby 1，那么它将在 HTML 中具有data-buff-type="strength"和。data-buff-amount="1"

然后，您可以单独存储基本统计数据，并具有检查/应用宠物增益的功能。我在每一行旁边添加了注释来解释。

var baseStats = {
  strength: 1,
  mana: 1,
  regen: 1
};

function getStats() {
  var selectedPet = document.querySelector('input[name="Pets"]:checked');  //Find the selected pet
  if (!selectedPet) return baseStats;                                      //No pet selected, just return base stats
  
  var buffType = selectedPet.dataset.buffType;                             //Get selected pet's data-buff-type
  var buffAmount = parseInt( selectedPet.dataset.buffAmount );             //Get selected pet's data-buff-amount
  
  var stats = {...baseStats};                                              //Copy our base stats
  stats[buffType] += buffAmount;                                           //Find the buff-type, add the buff-amount to it
  
  return stats;                                                            //Return the buffed stats
}

function updateStats() {
  var stats = getStats();                                                      //Get buffed stats
  document.querySelectorAll(".stat").forEach(e => e.innerHTML = stats[e.id]);  //Set spans where ID matches stat type
}

//Add listener to all radio buttons
document.querySelectorAll('input[name="Pets"]').forEach(e => e.addEventListener("change", updateStats));

//Set the stats on page-load
updateStats();
div { margin: 5px 0; }
<div>
  <input type="radio" name="Pets" id="wolf-radio" data-buff-type="strength" data-buff-amount="1">
  <label for="wolf-radio">Wolf</label>
</div>

<div>
  <input type="radio" name="Pets" id="lizard-radio" data-buff-type="mana" data-buff-amount="1">
  <label for="wolf-radio">Lizard</label>
</div>

<div>
  <input type="radio" name="Pets" id="turtle-radio" data-buff-type="regen" data-buff-amount="1">
  <label for="wolf-radio">Turtle</label>
</div>

<div>
  Strength: <span class="stat" id="strength"></span>
</div>

<div>
  Mana: <span class="stat" id="mana"></span>
</div>

<div>
  Regen: <span class="stat" id="regen"></span>
</div>

推荐阅读