我在div內有5張圖像，如何移動單擊的圖像的位置，使其移動成為div內的第一張圖像？

Question

基本上，當單擊div內的圖像一次時，需要移動被單擊圖像的位置，以使其成為div內的第一張圖像，其余圖像必須在一個點上隨機播放。 我不能為此使用jQuery。

    <div>
        <img src="images/yellow.jpg">
        <img src="images/blue.jpg">
        <img src="images/red.jpg">
        <img src="images/green.jpg">
        <img src="images/black.jpg">
    </div>

我在javascript中嘗試了以下方法：

    document.addEventListener('click', function() {
        for(var i = 0; i < document.images.length; i++) {
            //what code here?    

    }


    }, false);

Answer 1

只需將單擊的圖像與父圖像分離，然后在開始時將其重新插入即可。 您還可以共享處理程序，並使用關鍵字this來識別單擊的圖像。

 var img = document.querySelectorAll("img"); for(var i = 0; i < img.length; i++) img[i].addEventListener("click", clickHandler); function clickHandler() { var parent = this.parentNode; // ref. parent for later parent.removeChild(this); // remove clicked image from DOM parent.insertBefore(this, parent.firstChild); // reinsert clicked image first } 

 <div style="font-size:0"> <img src="http://lorempixel.com/64/64?1"> <img src="http://lorempixel.com/64/64?2"> <img src="http://lorempixel.com/64/64?3"> <img src="http://lorempixel.com/64/64?4"> <img src="http://lorempixel.com/64/64?5"> </div> 

Answer 2

只需使用removeChild()刪除單擊的元素，然后將其與新元素插入相同即可。

 var img_wrapper = document.getElementById('img_wrapper'); var el = img_wrapper.getElementsByTagName('img'); for(var i = 0; i < el.length; i++) { el[i].addEventListener("click", shuffleImages); } function shuffleImages(e) { var selected_img = e.target; img_wrapper.removeChild(selected_img); img_wrapper.insertBefore(selected_img, img_wrapper.firstChild); } 

 <div id="img_wrapper"> <img src="http://via.placeholder.com/100x100&&text=1" /> <img src="http://via.placeholder.com/100x100&&text=2" /> <img src="http://via.placeholder.com/100x100&&text=3" /> <img src="http://via.placeholder.com/100x100&&text=4" /> <img src="http://via.placeholder.com/100x100&&text=5" /> </div> 

Answer 3

將單擊的圖像追加到第一個位置。

https://jsfiddle.net/vineeshmp/ndndhc9j/

 <div id="container">
     <img src="http://4.bp.blogspot.com/-M7FEplJcjOM/UE0-vV3HUcI/AAAAAAAAEBA/-nTyQ8spBJc/s1600/Number-One.png" width="100" height="100">
     <img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/MetroDF_Linea_2.jpg" width="100" height="100">
     <img src="http://www.hotel-r.net/im/hotel/gb/number-three-20.png" width="100" height="100">
     <img src="http://1.bp.blogspot.com/-mFRbag9oIwM/URcr_79sUtI/AAAAAAAAIFA/ezJStcA1ZpM/s320/4.jpg" width="100" height="100">
 </div>

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement; 
    var container  = document.getElementById("container");
    container.insertBefore(target, container.firstChild);
}, false);

Answer 4

將點擊的圖像移至第一位置的另一種方法

 document.querySelectorAll('img').forEach(function(item) { item.addEventListener('click', function() { var imgs = document.querySelectorAll('img'); firstimg = imgs[0].src; for(var i = 1; i < imgs.length; i++) { if(imgs[i].src == this.src) { imgs[0].src = this.src; imgs[i].src = firstimg; } } }, false); }); 

 <div> <img src="http://lorempixel.com/64/64?1"> <img src="http://lorempixel.com/64/64?2"> <img src="http://lorempixel.com/64/64?3"> <img src="http://lorempixel.com/64/64?4"> <img src="http://lorempixel.com/64/64?5"> </div>