Question

因此，我想创建一个函数来查看哪个单选按钮处于活动状态，然后为每个单选按钮turtle，wolf，lizard等处理带有true / false标志的去除效果的效果。就像

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点力量。仅当选中单选按钮时，每个单选按钮的增益才会打开。（因此为什么我要一个好的true / false标志）。我的实际输出不是单选按钮的功能/统计信息直接与所选择的功能/统计信息绑定。我希望将其他单选按钮设置为false，而将其中一个设置为true。

Answer 1

所以，我可能对此做了很多重写，但我个人会选择以下路线。

要定义哪个宠物会获得哪个增益，以及该增益是多少，请使用数据属性。例如，如果wolf应该用strength修饰1，那么HTML中将包含data-buff-type="strength"和data-buff-amount="1"。

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

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>

为每个单选按钮制作一个简单的true / false标志

1 个答案: