javascript - 我正在尝试将过滤器：JavaScript 中的亮度应用于一堆图像元素

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，这是“亮度”，但它似乎不起作用。

标签： javascriptcss

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">