Javascript добавление картинок по порядку
Здраствуйте. Интересует вопрос, как добавить картинки в строку по порядку их нажатия?
Пример: Есть HTML код: <div class="tovar-1"> <img src="tovar-1.jpg" alt="tovar1"> </div> <div class="tovar-2"> <img src="tovar-2.jpg" alt="tovar2"> </div> <div class="tovar-3"> <img src="tovar-3.jpg" alt="tovar3"> </div> А так же снизу пустой блок размером 100px на 10px. Как можно сделать , чтоб при нажатии на картинку из HTML кода, она добавлялась в нижний блок , в порядке слева-направо. Когда нажимаеш езе одну, она добавляется в список после нее и т.д. Знаю что нужно использовать onClick, а вот как функцию написать непонимаю . Буду очень благодарен Вам за ответ! |
<div class="tovar tovar-1">
<img src="tovar-1.jpg" alt="tovar1">
</div>
<div class="tovar tovar-2">
<img src="tovar-2.jpg" alt="tovar2">
</div>
<div class="tovar tovar-3">
<img src="tovar-3.jpg" alt="tovar3">
</div>
<div class="holder" style="border: 1px solid red"></div>
<script>
(function(){
var images = document.querySelectorAll('.tovar img');
var holder = document.querySelector('.holder');
function onclick() {
holder.appendChild(this);
}
for (var i = 0; i < images.length; i++) {
images[i].onclick = onclick;
}
})();
</script>
|
| Часовой пояс GMT +3, время: 19:20. |