javascript - 是否可以创建一个 HTML 幻灯片，在其中命名 div，而不是通过数字引用它们？

Question

我正在尝试制作类似于 this one by w3schools 的幻灯片放映.

除了我的幻灯片还有很多。我还有单独的按钮，可将您带到特定的幻灯片。因此，如果我这样做: onclick="currentDiv(5)" 然后在开头添加幻灯片，按钮将转到错误的幻灯片。我正在寻找一种方法来执行以下操作: onclick="currentDiv(forrest)"

编辑:

抱歉，如果我太宽泛了。我会尝试并详细说明。我目前正在学习 html 并尝试学习 javascript、css 和 php。但我还没有学到足够的知识来改变我现有的脚本来做到这一点。我会尝试说得更具体一些。我有一堆幻灯片。我添加了可将您带到特定幻灯片的按钮。所以我有一个按钮可以带你到幻灯片 7。问题是如果我添加一张新幻灯片，比如在位置 3，它会使其余幻灯片打乱顺序。旧幻灯片 6 现在是 7。所以我的按钮引用旧幻灯片 6 的新位置 7。该按钮不知道幻灯片 7 移至 8。如果我可以执行类似 onclick="currentDiv(福雷斯特)”如果顺序改变也没关系。

Answer 1

@ChrisG为我解决了这个问题。我只是将答案发布在这里以供将来引用并将其标记为已解决。谢谢克里斯!

Here's a fiddle: jsfiddle.net/fp39h2yk (also: yes, it's obviously possible. it's trivial. the answer is to learn JavaScript, not copy-paste scripts from w3schools)

HTML:

<button onclick="currentDiv('forest');">
  Forest
</button>

<div class="w3-content" style="max-width:1200px">
  <img name="city" class="mySlides" src="img_nature_wide.jpg" style="width:100%">
  <img name="mountains" class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
  <img name="forest" class="mySlides" src="img_mountains_wide.jpg" style="width:100%">
</div>

Javascript:

function currentDiv(n) {
  if (isNaN(n)) {
    var slides = document.getElementsByClassName("mySlides");
    var found = 0;
    for (var i = 0; i < slides.length; i++) {
      if (slides[i].getAttribute("name") == n) {
        found = i + 1;
        break;
      }
    }
    if (!found) return;
    n = found;
  }
  showDivs(slideIndex = n);
}

function showDivs(n) {
  alert("showing slide " + n);
}