时间戳

首页 > 解决方案 > 如何通过模板文字使所有按钮起作用

javascript - 如何通过模板文字使所有按钮起作用

问题描述

我正在尝试将按钮显示类型更改为阻止，但只有第一个按钮有效。这是我的代码：

const descriptions = ['Hi', 'Bonjour', 'Guten Tag', 'Hola', 'Zdravstvuyte', 'Nǐn hǎo', 'Salve', 'Konnichiwa', 'Olá', 'Goddag', 'Shikamoo', 'Goedendag']

//Loop created to do its magic for the array
for (let i = 0; i <= 11; i++) {
    images.push(`<div><img src="${links[i]}"> <button id="myBtn">More info</button><div id='descriptions' style="display: none;">${descriptions[i]}</div></div>`)
}

//Images have been dynamically added!
$images.innerHTML += images.join(' ')

//Event listener so the buttons can function
$images.addEventListener('click', function (event){
    if (event.target.id == 'myBtn') {
       document.getElementById('descriptions').style.display = 'block'
       console.log('button clicked')
        
    }

标签： javascripthtmlcss

解决方案

如前所述，不要使用多个 ID。ID 必须是唯一的，这就是使它们成为 ID 的原因

使用健全的数据结构而不是多个数组。

数据被迭代一次，在那里工作，使用documentFragment，所以 DOM 不会持续更新。

最后，使用 CSS 而不是内联样式，在按钮单击时添加一个活动类。

//Use a sane data structure instead of multiple arrays
images = [
  {"link": "Hi.jpg", 
   "description": "Hi"
   },
   {"link": "Bonjour.jpg", 
   "description": "Bonjour"
   },
   {"link": "Guten-Tag.jpg", 
   "description": "Guten Tag"
   },
   {"link": "Hola.jpg", 
   "description": "Hola"
   },
   {"link": "Zdravstvuyte.jpg", 
   "description": "Zdravstvuyte"
   },
   {"link": "Nǐn-hǎo.jpg", 
   "description": "Nǐn hǎo"
   },
   {"link": "Salve.jpg", 
   "description": "Salve"
   },
   {"link": "Konnichiwa.jpg", 
   "description": "Konnichiwa"
   },
   {"link": "Olá.jpg", 
   "description": "Olá"
   },
   {"link": "Goddag.jpg", 
   "description": "Goddag"
   },
   {"link": "Shikamoo.jpg", 
   "description": "Shikamoo"
   },
   {"link": "Goedendag.jpg", 
   "description": "Goedendag"
   }
];

//Get the image
$images = document.getElementById("images");
//Create  frament to do the work in
var fragment = new DocumentFragment();
fragment.innerHTML = "";
//Iterate the data, never hard code a number here, use the length of your data array
for (let i = 0; i < images.length; i++) {
  //update the fragment
  fragment.innerHTML += `<div><img src="${images[i].link}"> <button class="myBtn">More info</button><div class='descriptions'>${images[i].description}</div></div>`;
}

//UPdate the host elemen
$images.innerHTML =fragment.innerHTML;
//Event listener
$images.addEventListener('click', function(event) {
      //If myBtn clicked
      if (event.target.matches('.myBtn')) {
        //Find parent div
        let parent = event.target.closest("div");
        //Find descriptions element and add active class
        parent.querySelector(".descriptions").classList.add("active");        

      }
})
.descriptions:not(.active) {
  display:none;
}
<div id="images"></div>

推荐阅读