Question

我正在尝试创建一个图片库，该图片库会根据您单击的按钮/链接而变化。但是，我似乎只能看到“ image 1”画廊。完全不显示“图像2”和“图像3”。

我正在尝试实现-当您单击一个图库时，以前在那里的其他图像将消失。我只希望一次显示一个画廊。但是，我的“ deleteImages”功能似乎也不起作用。

    let link = document.querySelectorAll('a');
    let imageContainer = document.querySelector('.image-container');
    let images = document.querySelector('.image-container img');
    let localPath;
    
    
    let imagesName = [
      
        {
            "album1": ["pexels-photo-412537.jpeg", "pexels-photo-748898.jpeg", "pexels-photo-1313191.jpeg"]
        },
        
        {
            "album2": ["pexels-photo-426893.jpeg", "pexels-photo-573241.jpeg", "pexels-photo-1139370.jpeg"]
        },
        
        {
            "album3": ["pexels-photo-58625.jpeg", "pexels-photo-1308684.jpeg", "pexels-photo-1308754.jpeg"]
        }
        
    ];
    
    
    function deleteImages() {
        
        if(imageContainer.childElementCount > 0) {
        
            images.forEach((img) => {
                imageContainer.removeChild(img);
            }); 
            
        }
    }
    
    
    
    function createImg(src) {
        
            let img = document.createElement("img");
            img.src = src;
            imageContainer.appendChild(img);
    
    }
    
    
    link.forEach((link) => {
        link.addEventListener('click', () => {
            
            switch(link.textContent) {
                case "image 1":
    
                    deleteImages();
                    localPath = "/images/album1/";
                    for (let i = 0; i < imagesName.length; i++) {
                        let imageURL = imagesName[i].album1;
                        for (let n = 0; n < imageURL.length; n++) {
                            createImg(localPath + imageURL[n]);
                        }
                    }
                    
                    
                    break;
                case "image 2":
                    
                    deleteImages();
                    localPath = "/images/album2/";
                    for (let i = 0; i < imagesName.length; i++) {
                        let imageURL = imagesName[i].album2;
                        for (let n = 0; n < imageURL.length; n++) {
                            createImg(localPath + imageURL[n]);
                        }
                    }
                    
                    
                    
    
                    break;
                case "image 3":
    
                    deleteImages();
                    localPath = "/images/album3/";
                    for (let i = 0; i < imagesName.length; i++) {
                        let imageURL = imagesName[i].album3;
                        for (let n = 0; n < imageURL.length; n++) {
                            createImg(localPath + imageURL[n]);
                        }
                    }
                    
                    
                    
                    break;
            }
           
        });
    });

    <!DOCTYPE html>
    <html lang="">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        
        <style>
        
            .image-container  {
                width: 100%;
                height: auto;
            }
            
            img {
                max-height: 333px;
                overflow: hidden;
            }
        
        </style>
    </head>
    
    <body>
       
       <a href="#">image 1</a>
       <a href="#">image 2</a>
       <a href="#">image 3</a>
       
       <div class="image-container">
           
    
           
       </div>
       
 
    </body>
    </html>

Answer 1

我想这就是你想要的。每个链接都有一个自定义属性，其中包含用于单击该链接时设置图像的图像URL。单击链接后，事件监听器将从属性中获取URL并将图像src设置为该URL。

//global variables

/*
Objects are unecessary unless you need to hold and differentiate more information. For this, I'm simply using a nested array. In this example, I have two nested arrays. Each nested array represents an album. Note, the images in both albums are identical so both albums will appear to be the same but are infact different.
*/
var galleryAlbums = [['https://developer.mozilla.org/static/img/hero-dino.6c51deebd4af.png','https://developer.mozilla.org/static/img/beast-404.ce38fcf80386.png'],['https://developer.mozilla.org/static/img/hero-dino.6c51deebd4af.png','https://developer.mozilla.org/static/img/beast-404.ce38fcf80386.png']];

//global event listeners
window.addEventListener('load',init);

//global functions
function init(){
  var gallery = document.getElementById('galleryContainer');
  var galleryImageContainer = document.getElementById('galleryImageContainer');
  for(var i = 0; i < galleryAlbums.length; i++){
    //loop through each album
    var albumContainer = document.createElement('div');
    var albumLink = document.createElement('a');
    albumLink.setAttribute('data-album',i);
    albumLink.href = '#';
    albumLink.innerHTML = 'Gallery Album Link '+i;
    albumContainer.id = i;
    albumLink.addEventListener('click',function(e){
      var albums = albumContainer.children;
      for(var i = 0; i < albums.length; i++){
        albums[i].style.display = 'none';
      }
      var albumId = this.getAttribute('data-album');
      document.getElementById(albumId).style.display = 'block';
    });
    for(var j = 0; j < galleryAlbums[i].length; j++){
      //loop through each image in the album
      var galleryImage = document.createElement('img');
      galleryImage.src = galleryAlbums[i][j];
      albumContainer.appendChild(galleryImage);
    }
    galleryImageContainer.appendChild(albumContainer);
    gallery.appendChild(albumLink);
  }
}

#galleryImageContainer div{
  display:none;
}

a{
  display:block;
}

<div id="galleryContainer">
<div id="galleryImageContainer">

</div>
</div>

如何根据点击更改图片？

1 个答案: