jQuery: цикл для изменения проблемы с изображением

Question

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

У меня есть этот простой код jQuery, чтобы изменить источник изображения при нажатии.Но src обновляется только один раз, и я не вижу, что мне не хватает ... Кто-нибудь может мне помочь?Код:

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]);
        }
    });

HTML:

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

Answer 1

Как уже упоминалось, вы не можете циклически перемещаться по массиву, вы должны увеличиваться с каждым кликом.

$(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++;
});

Answer 2

Во-первых, изображения вампиров не входят в массив изображений.Во-вторых, вместо того, чтобы перебирать весь массив, почему бы вам не найти индекс текущего источника в массиве, а затем просто изменить атрибут src на следующий массив, и когда вы достигнете конца, установите текущий индекс на -1.Вот код для этого.

$(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]);
        });

    });

Answer 3

Изображение вампира не является частью массива изображений, и у вас есть 1 изображение, повторяющееся с индексом 1 и 2

Следующий код перебирает все три изображения в массиве.Добавьте изображение вампира в массив изображений, и он также начнет цикл.

$(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;

    });
});