Question

我无法创建让我进入下一个div的函数。

我已经尝试过一些东西，但是由于某种原因我无法使其工作

<button type="button" name="button" onclick="arrowLeft()" id="arrowLeft">Prev</button>
<button type="button" name="button" onclick="arrowRight()" id="arrowRight">Next</button>

<div class="monsterTabs" id="monsterTabs">
  <div class="monsterType" id="monsterSlime" style="display:block;">
    Slime
  </div>
  <div class="monsterType" id="monsterZombie" style="display:none;">
    Zombie
  </div>
  <div class="monsterType" id="monsterSkeleton" style="display:none;">
    Skeleton
  </div>
  <div class="monsterType" id="monsterWolf" style="display:none;">
    Wolf
  </div>
</div>

https://jsfiddle.net/gfx873ve/3

我想知道最好的制作方法，这样我就可以顺利通过divs。

Answer 1

使用document.getElementsByClassName('monsterType');可以收集所有怪物，然后在调用arrowLeft和arrowRight函数时更新每个怪物的显示属性。

我使用了monsterId变量来控制当前显示的怪物。除非它是列表中的第monsters个元素，否则none中的每个元素的显示属性都设置为monsterId。

monsterId = (monsterId + monsters.length) % monsters.length;行使用模数（％）运算符来确保monsterId始终在0和monsters.length-1之间。

let monsters = document.getElementsByClassName('monsterType');
let monsterId = 0;

function arrowLeft() {
  updateMonster(-1);
}

function arrowRight() {
 updateMonster(1);
}

function updateMonster(direction) {  
  monsterId += direction;
  monsterId = (monsterId + monsters.length) % monsters.length;
  
  for(var i = 0; i < monsters.length; i++){
    monsters[i].style.display = i === monsterId ? 'block' : 'none';
  }  
}

<button type="button" name="button" onclick="arrowLeft()" id="arrowLeft">Prev</button>
<button type="button" name="button" onclick="arrowRight()" id="arrowRight">Next</button>


<div class="monsterTabs" id="monsterTabs">
  <div class="monsterType" id="monsterSlime" style="display:block;">
    Slime
  </div>
  <div class="monsterType" id="monsterZombie" style="display:none;">
    Zombie
  </div>
  <div class="monsterType" id="monsterSkeleton" style="display:none;">
    Skeleton
  </div>
  <div class="monsterType" id="monsterWolf" style="display:none;">
    Wolf
  </div>
</div>

点击按钮显示下一个div

1 个答案: