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

Question

I am using the waterwheel-carousel image slider located here . I would like to have multiple carousels on one page.

Here is a snippet of my code:

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

And the 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;
}

The issue is that only the first #waterwheel-carousel will load. The other two do not. I did some research and it seems like it may only be returning the first element with that id. So I have tried a different approach on my $(document).ready(.. function, adding class="waterwheel-carousel" to each 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>

But then they all fail to load.

Anyone have any ideas?

Thanks.

Answer 1

Element IDs should be unique within the entire document. see

Instead of id use class to get all element

<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

This is what classes are for, IDs are unique. Which means that each element in the document must have a different ID.

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

and you're good to go.