Измените предварительно загруженные изображения в jquery

Question

Я пытаюсь изменить изображения на клик. Изображения должны быть предварительно загружены, но я не могу даже сказать, если они предварительно загружаются. Новое в JQuery, пожалуйста, помогите.

<script src="https://code.jquery.com/jquery-1.10.2.js"> 
$(document).ready(function() { 
var preloads = [ 
    'images/01.jpg', 
    'images/02.jpg', 
    'images/03.jpg', 
    'images/04.jpg', 
    'images/05.jpg', 
]; 

$(preloads).each(function(){ 
    $('')[0].src=this; 
}); 
var i = 0; 


}); 

$("img").click(function() { 
    ++i; 
    if(i = 17) { 
     i = 0; 
    } 
    $(this).src = preloads[i]; 
}); 
</script> 

Answer 1

Есть несколько вещей, которые не соответствуют тому, что у вас есть. Во-первых, вы не можете указать src для тега <script> с телом, потому что тогда он не будет выполнять то, что у вас внутри тега, только то, что загружено из источника. Во-вторых, измените строку $('')[0].src = this; на $('<img/>').get(0).src = val; и измените объявление функции на function (i, val) {, чтобы вы передавали строку, связанную с каждым индексом массива.

Итак, вот решение:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
<script> 
    $(document).ready(function() { 
    var preloads = [ 
     'images/01.jpg', 
     'images/02.jpg', 
     'images/03.jpg', 
     'images/04.jpg', 
     'images/05.jpg', 
    ]; 

    $(preloads).each(function(i, val) { 
     $('<img/>').get(0).src = val; 
    }); 
    var i = 0; 

    $("img").click(function() { 
     ++i; 
     if (i = 17) { 
     i = 0; 
     } 
     $(this).get(0).src = preloads[i]; 
    }); 
    }); 
</script>