时间戳

首页 > 解决方案 > 如何使用 javascript 附加一个 li 和链接元素

javascript - 如何使用 javascript 附加一个 li 和链接元素

问题描述

我正在构建一个灯箱，当我单击具有特定于特定图像列表的不同类的 div 时，我想显示一个图像列表。灯箱正在工作，当我单击 div 时，它会出现，但是当我单击具有“.work-1”类的潜水时，问题就出现了，列表显示为字符串而不是实际图片。我来求救了。

    /* Gallery operation*/
const button = document.querySelectorAll('.gallery');
const list = document.createElement('ul');
const lightbox = document.createElement('div');
const parentDiv = document.querySelector('header').parentNode;
const childDiv = document.querySelector('header');
/*const newList =*/
const logo = [
  '<a href="images/logos1.jpg"></a> ',
  '<a href="images/logos2.jpg"></a> ',
  '<a href="images/logos3.jpg"></a> ',
  '<a href="images/logos4.jpg"></a> ',
];
const flyer = [
  '<a href="images/logos1.jpg"></a> ',
  '<a href="images/logos2.jpg"></a> ',
  '<a href="images/logos3.jpg"></a> ',
  '<a href="images/logos4.jpg"></a> ',
];

button.forEach(function getThem(div){
   div.addEventListener('click',function(){
     const box  = parentDiv.insertBefore(lightbox, childDiv);
     box.id = 'lightbox';
     const newBox = box.appendChild(list);
     function getList(){
               if(e.target.className === 'work-1'){
          logo.forEach(function(logo){
            var li = document.createElement('li');
            li.innerText = e;
            newBox.append(li);
          });
        }else if(e.target.className === 'work-2'){
            flyer.forEach(function(flyer){
              var li = document.createElement('li');
              li.innerText = e;
              newBox.append(li);
            });
          }
        };
        box.getList();
        box.classList.add('active');
       console.log(button);

   });
   lightbox.addEventListener('click', e => {
  if (e.target !== e.currentTarget) return
  lightbox.classList.remove('active')
});

标签： javascriptarrayslightbox

解决方案

我认为您的策略不太正确，我认为您想要做的是显示图像

<img>

而不是锚标签

<a href'..>

您可以通过将 an 附加<img>到您的 li来获得此结果src='images/something.jpg'

因此，您希望有一个包含图像所有 url 的列表：

const logos = [
  'images/logos1.jpg',
  'images/logos2.jpg',
  'images/logos3.jpg',
  'images/logos4.jpg',
]

然后尝试添加这个：

logos.forEach(function(logo){
            var li = document.createElement('li');
            var img = document.createElement('img');
            img.src = logo;
            li.append(img);
            newBox.append(li);
          });

ES6：

logo.forEach((logo) => {
   const li = document.createElement('li');

   const img = document.createElement('img');

   img.src = logo; // set the url of your image like 'images/logos1.jpg'

   li.append(img);

   newBox.append(li);
})

推荐阅读