我在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>