Вставьте источника изображения один за другим изображением

Question

Demo

Я хочу, что всякий раз, когда я нажимаю на любое изображение, то этот образ ЦСИ должен перейти к изображению с img1 идентификатором. Если идентификатор img1 уже имеет изображение, источник изображения должен перейти к изображению с идентификатором img2 и т. Д.

$(".img").click(function() { 
    var newsrc=$(this).attr("src"); 
    alert(newsrc); 
    $("#cropimage").attr("src",newsrc); 
}); 

Код HTML здесь.

<div id="img-container"> 
    <img id="cropimage" /> 
</div> 
<div> 
    <img src="" id="img1" /> 
    <img src="" id="img2" /> 
    <img src="" id="img3" /> 
    <img src="" id="img4" /> 
    <img src="" id="img5" /> 
</div> 

Answer 1

Добавить уникальный идентификатор в контейнер пустых изображений.

$("#myImages img[src='']") выберет все изображения внутри #myImages элементов, которые имеют значение атрибута src как пустое. first() получит первый из выбранных элементов.

Demo

$(".img").on('click', function() { 
 
    var newsrc = $(this).attr("src"); 
 
    $("#myImages img[src='']").first().attr("src", newsrc); 
 
});

#myImages img { 
 
    display: block; 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<img class="img" src="http://www.w3schools.com/images/w3schools.png" /> 
 
<br/> 
 
<img class="img" src="https://www.google.co.in/images/icons/hpcg/ribbon-black_68.png" /> 
 
<div id="img-container"> 
 
    <img id="cropimage" /> 
 
</div> 
 
<div id="myImages"> 
 
    <img src="" id="img1" /> 
 
    <img src="" id="img2" /> 
 
    <img src="" id="img3" /> 
 
    <img src="" id="img4" /> 
 
    <img src="" id="img5" /> 
 
</div>

Если вы не хотите, чтобы изменить структуру HTML, Проверьте это demo