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

Question

所以我想创建一个函数来查看哪个单选按钮处于事件状态，然后处理删除该效果的效果，并为每个单选按钮乌龟、狼、蜥蜴等使用真/假标志。所以就像

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

然后，当您设置其中一个事件时，您将传递给一个函数并查看所有其他函数以查看其是否正确。如果为真，则减去它的值。然后将其他设置为 false。

我主要希望这样做，这样当您切换单选按钮时，与这些单选按钮相关的统计数据/功能就不会保留。当从乌龟切换到蜥蜴时，我失去了 1 点力量，这种情况不应该发生在这种方法中。我对 JavaScript 很陌生，所以我不知道如何设置才能使其工作。我将在我的代码中向您展示我的意思

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

他说“当单选按钮发生变化时，事件监听器会调用一个函数来确定其中哪个是事件的，然后创建一个函数来找出哪些是事件的，并为每个按钮进行删除删除的一部分是将其设置为 false然后完成后将新的设置为 true”

这是我的 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>

您可以从代码片段中看到，从狼切换到蜥蜴单选按钮效果很好，因为您从 2 强度开始。但当你从乌龟换成蜥蜴时，我不希望你失去 1 点力量。每个单选按钮增益仅应在选择单选按钮时打开。 (这就是为什么我想要一个好的真/假标志)。我的实际输出单选按钮功能/统计数据并不直接与它们的选择相关。我希望将其他单选按钮设为 false 而其中一个为 true 可以解决此问题。

Answer 1

所以，我可能重写了一点太多，但就我个人而言，我会采取如下所示的路线。

要定义哪个宠物获得哪个增益以及该增益的大小，请使用数据属性。例如，如果 wolf应该加强strength通过1 ，那么就会有 data-buff-type="strength"和data-buff-amount="1"在 HTML 中。

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

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>