javascript - HTML Javascript - 获取所有具有 ID 的元素

Question

我正在使用位于 here 的 waterwheel-carousel 图像 slider .我想在一页上有多个轮播。

这是我的代码片段:

<script>
    // load carousel
    $(document).ready(function () {
        $("#waterwheel-carousel").waterwheelCarousel({
            separation: 90,
            separationMultiplier: 0.2,
            horizonOffsetMultiplier: 1
        });
    });
</script>
.
.
.
<div id="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>     

<div id="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>  

<div id="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>  

还有 CSS:

/* Projects page carousel(s) */
#waterwheel-carousel {
  width: 200px;
  height: 216px;
  position: relative;
  clear: both;
  overflow: hidden;
  margin: 0 auto;
}
#waterwheel-carousel img {
  cursor: pointer;
  border: 5px solid black;
}

问题是只有第一个 #waterwheel-carousel 会加载。其他两个没有。我做了一些研究，似乎它可能只返回具有该 ID 的第一个元素。所以我在我的 $(document).ready(.. 函数上尝试了一种不同的方法，将 class="waterwheel-carousel" 添加到每个 div:

<script>
    $(document).ready(function () {
      var allElements = $(document).getElementsByClassName("waterwheel-carousel");
      for (var i = 0; i < allElements.length; i++) {
          var currentElement = allElements[i];
          currentElement.waterwheelCarousel({
              separation: 90,
              separationMultiplier: 0.2,
              horizonOffsetMultiplier: 1
          });
        }
    });
</script>

但随后它们全部加载失败。

有人有什么想法吗？

谢谢。

Answer 1

元素 ID 在整个文档中应该是唯一的。 see

代替id使用类来获取所有元素

<script>
    // load carousel
    $(document).ready(function () {
        $(".waterwheel-carousel").waterwheelCarousel({
            separation: 90,
            separationMultiplier: 0.2,
            horizonOffsetMultiplier: 1
        });
    });
</script>
.
.
.
<div class="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>     

<div class="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>  

<div class="waterwheel-carousel">
  <img src="" alt="one">
  <img src="" alt="two">
  <img src="" alt="three">
  <img src="" alt="four">
</div>