CODEWITHSUNDEEP
jquery
rose___y
rose___y

Reputation: 33

loop through elements on button click, then hide all, then start loop again with jQuery

I'm trying to loop through a collection of elements, by showing each one on a button click (which I've managed to do successfully).

The next part I'm trying to do is, after the last element of the collection is shown, the next button click should hide all elements, and then the next button click should start the loop from the beginning.

UPDATE: I think I'm almost there... it's now clearing the images once it gets to the end, but the next click jumps already to the second image and skips the first one. How do I get it to clear all images but then still start again at the beginning, "i=0"? (codepen and code below has been updated)

Here is my codepen: https://codepen.io/rrosegregoryy/pen/qBXVKVW

And my code:

    $(document).ready(function () {
  //Elements to loop through
  var images = $(".click-image");
  //Start at 0
  i = 0;

  function showImage() {
    //Loop through elements
    $(images).each(function (index) {
      if (i == index) {
        //Show active element
        $(this).show();
      } else if (i == $(images).length) {
        //Show message
        $(this).show();
        //Reset if list number is reached
        $(images).hide();
        i = 0;
      }
    });

    i++;
  }

  //Run function on button click
  $(".and-button").click(showImage);
});
.and-button {
  position: absolute;
  font-size: 42px;
  top: 50%;
  left: 50%;
  cursor: pointer;
}

.click-image {
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
  display: none;
}

.is--1 {
  bottom: 25%;
  right: 10%;
}

.is--2 {
  top: 25%;
  left: 10%;
}

.is--3 {
  top: 15%;
  right: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="click-image is--1"></div>
<div class="click-image is--2"></div>
<div class="click-image is--3"></div>
<div class="and-button">&</div>

Upvotes: 0

Views: 335

Answers (2)

mplungjan
mplungjan

Reputation: 178126

You likely mean this?

I assume you only want to show one at a time. If not, remove the .hide statement

$(function() {
  //Elements to loop through
  const images = $(".click-image");
  //Start at 0
  let i = 0;
  const showImage = () => {
    if (i > $(images).length) {
      console.log("done"); // or reveal some other element
      i = 0;
      $(images).hide(); 
      // return; // comment this out to show the first image right away
    }
    $(images).eq(i).show()
    i++;
  };
  //Run function on button click
  $(".and-button").on("click", showImage);
});
.and-button {
  position: absolute;
  font-size: 42px;
  top: 50%;
  left: 50%;
  cursor: pointer;
}

.click-image {
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
  display: none;
}

.is--1 {
  bottom: 25%;
  right: 10%;
}

.is--2 {
  top: 25%;
  left: 10%;
}

.is--3 {
  top: 15%;
  right: 30%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="click-image is--1">img1</div>
<div class="click-image is--2">img2</div>
<div class="click-image is--3">img3</div>
<div class="and-button">&</div>

Upvotes: 1

rose___y
rose___y

Reputation: 33

Thanks to @mplungjan and playing around with their code, I got it working. I don't really understand why but below is the final jquery code and here's a codepen: https://codepen.io/rrosegregoryy/pen/vYJoRzP

$(function() {
  //Elements to loop through
  const images = $(".click-image");
  //Start at 0
  let i = 0;
  const showImage = () => {
    if (i === $(images).length) {
      console.log("done"); // or reveal some other element
      $(images).hide();
      i = 0;
      return; // comment this out to show the first image right away
    }
    //$(images).hide(); // remove  if you want to keep the shown images on screen 
    $(images).eq(i).show()
    i++;
  };
  //Run function on button click
  $(".and-button").on("click", showImage);
});

Upvotes: 0

Related Questions