Question

我正在使用位于here的waterwheel-carousel图片滑块。我想在一个页面上有多个轮播。

以下是我的代码片段：

<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使用class来获取所有元素

<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>

Answer 2

这是类的用途，ID是唯一的。这意味着文档中的每个元素都必须具有不同的ID。

修改您的HTML：

<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>

你很高兴。

HTML Javascript - 获取所有带ID的元素

2 个答案: