CODEWITHSUNDEEP
jqueryloops
Mellville
Mellville

Reputation: 1097

jQuery: loop to change image issue

$(document).ready(function () {
 
    $('.box').on('click', function () {
      var images=["http://www.themadcatlady.com/wp-content/uploads/2013/11/2013-11-0212.15.22.jpg","http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg",
"http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg"];
   
          for(i=0;i<images.length;i++){
            $('#image').attr("src", images[i]);
        }
    });

});
.box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    display: inline-block;
}
 <div class="row first-row">
            <div class="box col-md-2">
                <img src="https://s-media-cache-ak0.pinimg.com/736x/fe/3c/61/fe3c61a811ad7aa24c7fcd8ff8586436--vampire-masquerade-vampire-art.jpg" class="img-fluid" id="image">
            </div>
        </div>

I have this simple jQuery code to change the source of an image on 'click'. But the src only gets updated once and I can't see what I'm missing... Can someone help me out? The code:

jQuery:

$(document).ready(function () {

    $('.box').on('click', function () {
      var images=["img-1",img-2", etc];

          for(i=0;i<images.length;i++){
            $('#image').attr("src", images[i]);
        }
    });

The HTML:

<div class="row first-row">
            <div class="box col-md-2">
                <img src="img/image.jpg" class="img-fluid" id="image">
            </div>
        </div>

Upvotes: 0

Views: 415

Answers (3)

Himanshu Pant
Himanshu Pant

Reputation: 928

First, The vampire images in not part of images array. Second, instead of looping through the whole array, Why don't you find the index of the the current source in the array and then just change the src attribute to the next array and when you reach the end, set the current index to -1. Here's the code for it.

$(function(){
        var images=["http://www.themadcatlady.com/wp-content/uploads/2013/11/2013-11-0212.15.22.jpg","http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg",
                              "http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg"];    


        $('.box').on('click', function () {
            var currentIndex = images.indexOf($("#image").attr("src"));
            if(currentIndex === images.length - 2){
                currentIndex = -1;
            }
            $("#image").attr("src", images[currentIndex+1]);
        });

    });

Upvotes: 1

EternalHour
EternalHour

Reputation: 8621

As has been mentioned, you can't loop over the array, you must increment with each click.

$(document).ready(function () {
 var images = new Array();
 images[0] = "http://www.themadcatlady.com/wp-content/uploads/2013/11/2013-11-0212.15.22.jpg"
 images[1] = "http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg"
 images[2] = "http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg"

var i = 0;
$('.box').on('click', function () {
    $('#image').attr('src', images[i]);
i++;
});

Upvotes: 0

muasif80
muasif80

Reputation: 6006

The vampire image is not part of the images array and you have 1 image repeating at index 1 and 2

The following code is looping through all the three images in the array. Add the vampire image to the images array and it will start looping as well.

$(document).ready(function () {
 var currentImage = 0;
    $('.box').on('click', function () {
      var images=["http://www.themadcatlady.com/wp-content/uploads/2013/11/2013-11-0212.15.22.jpg","http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg",
"http://tailandfur.com/wp-content/uploads/2015/05/Black-Cat-Pictures-12.jpg"];

    console.log("currentImage", currentImage);
        if(currentImage === images.length)  currentImage = 0;
            console.log("displaying image at " + currentImage);
        $('#image').attr("src", images[currentImage]);
        currentImage = currentImage + 1;

    });
});

Upvotes: 2

Related Questions