更換圖像

Question

我的項目需要幫助。 我添加了一個功能，當單擊某些東西時，將圖像替換為城鎮。 確實發生了……但是僅對於一張和兩張原始圖片，我只想一次更改一張。 這是代碼段網址[JS小提琴] [1]

 var cDunes = document.getElementById('cDunes'); var eDunes = document.getElementById('eDunes'); var forest = document.getElementById('forest'); var oasis = document.getElementById('oasis'); cDunes.addEventListener("click", replaceCDune); eDunes.addEventListener("click", replaceEDune); function replaceCDune() { cDunes.src = "https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf"; } function replaceEDune() { eDunes.src = "https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" } 

 body { background-image: url("https://api.edmodo.com/files/717111096/download?f=9k7y8m7if6dkcq345y53s4yp4"); } img { float: left; } 

 <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy" /> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf" /> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy" /> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi" /> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> <img id="cDunes" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"> 

Answer 1

因此，如果我理解正確，一次只能更改/打開一張圖像。 如果稍微更改結構並將原始文件作為懸停源存儲在數據屬性中，則更容易實現。

這是一個裁剪的示例：

<html>
    <head>
        <script>
            window.onload = function(){
                //Assign event for each image holding a hover-src
                for(var tL=document.querySelectorAll('img[data-hover-src]'), i=0, j=tL.length; i<j; i++){
                    tL[i].addEventListener('click', replaceImage)
                }
            }

            function resetToOriginal(){
                //Sets all images holding a original-src back to it
                for(var tL=document.querySelectorAll('img[data-original-src]'), i=0, j=tL.length; i<j; i++){
                    var tS = tL[i].getAttribute('data-original-src');
                    (tS !== tL[i].src) && (tL[i].src = tS)
                }
            }

            function replaceImage(e){
                //Clicked element
                var tE = e.srcElement || e.target;

                //Storing the original src in a data-original-src-attribute if missing
                !tE.getAttribute('data-original-src') && tE.setAttribute('data-original-src', tE.src);

                //Reseting all the images
                resetToOriginal()

                //Change the src to the src in the data-hover-src-attribute
                tE.src = tE.getAttribute('data-hover-src') || tE.src
            }
        </script>
    </head>

    <body>
        <img id="eDunes" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf" data-hover-src = 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf' />
        <img id="forest" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy" data-hover-src = 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf'/>
        <img id="oasis" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi" data-hover-src = 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf'/>
    </body>
</html>

https://jsfiddle.net/9vv8m67n/

更新

<html>
    <head>
        <script>
            //Storing the images in an object array instead
            //The hover part is optional and if unset the tD in the createImages() function is used [1]
            var mImages = [
                {
                    src: 'https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf',
                    hover: 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf'
                },
                {src: 'https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy'},
                {src: 'https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi'}
            ];

            window.onload = function(){
                createImages(mImages) //Creating images and assiging events
            }

            //Creating images out of object
            function createImages(o){
                var tD = 'http://shushi168.com/data/out/193/37281782-random-image.png'; //[1]: Default hover-src on undefined

                var tF = document.createDocumentFragment()
                for(var i=0, j=o.length; i<j; i++){
                    var tI = tF.appendChild(document.createElement('img')); //Creating a new HTMLImage
                    tI.src = o[i].src;
                    tI.setAttribute('data-hover-src', o[i].hover || tD);
                    tI.addEventListener('click', replaceImage)
                }
                document.body.appendChild(tF) //Appending images to the dom - here body
            };

            function resetToOriginal(){
                //Sets all images holding a original-src back to it
                for(var tL=document.querySelectorAll('img[data-original-src]'), i=0, j=tL.length; i<j; i++){
                    var tS = tL[i].getAttribute('data-original-src');
                    (tS !== tL[i].src) && (tL[i].src = tS)
                }
            };

            function replaceImage(e){
                //Clicked element
                var tE = e.srcElement || e.target;

                //Storing the original src
                !tE.getAttribute('data-original-src') && tE.setAttribute('data-original-src', tE.src);

                //Reseting all the images
                resetToOriginal();

                //Change the src
                tE.src = tE.getAttribute('data-hover-src') || tE.src
            }
        </script>
    </head>

    <body>
        <!-- AJAX -->
    </body>
</html>