javascript - 我正在尝试应用过滤器 :brightness in JavaScript to a bunch of image elements

Question

var brightness = document.getElementById("brightness");

trash.addEventListener("click", function() {
  brightness.style.filter = "brightness(100%)";

});

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">

<div id="trash">
  <i class="fas fa-trash"></i>
</div>

<img src="imgs/utensil.svg" alt="utensil" id="utensil" id="brightness">
<img src="imgs/straw.svg" alt="straw" id="straw" id="brightness">
<img src="imgs/chipbag.svg" alt="chip bag" id="chip_bag" id="brightness">
<img src="imgs/garbagebag.svg" alt="garbage bag" id="g_bag" id="brightness">
<img src="imgs/eggs.svg" alt="eggs container" id="egg_container" id="brightness">

您好，很抱歉我必须嵌入一系列不存在的 svg 文件。有什么方法可以通过单击垃圾桶图标来应用亮度到所有 4 个图像，而不必分配每个 img 的 id (untesil.style.filter = "brightness(100%);..等等)？我做了第二个统一id，也就是“亮度”不过好像不行。

Answer 1

就像评论中的其他人所说的那样，您需要使用类...这行得通。

var trash = document.getElementById("trash");

trash.addEventListener("click", function() {
  var elems = document.querySelectorAll(".brightness");
  for (var i = elems.length; i--;) {
    elems[i].style.filter = "brightness(1.7)";
  }
});

<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">

<div id="trash">
  <i class="fas fa-trash"></i>
</div>

<img src="imgs/utensil.svg" alt="utensil" class="brightness">
<img src="imgs/straw.svg" alt="straw" class="brightness">
<img src="imgs/chipbag.svg" alt="chip bag" class="brightness">
<img src="imgs/garbagebag.svg" alt="garbage bag" class="brightness">
<img src="imgs/eggs.svg" alt="eggs container" class="brightness">