javascript - 隐藏具有特定属性的元素

Question

我有一个脚本，其中列出了数千张图片，每张图片都在一个单独的 div 中。像这样:

<div class="imagecontainer">
  <img src="picturename.jpg">
</div>

<div class="imagecontainer">
  <img src="picturename2.jpg">
</div>

我想要做的是以某种方式用文件大小和尺寸标记 div，这样我就可以很容易地隐藏重复的 image-div，只需单击它们即可。看看下面我在想什么:

<script>
function hide(filesize, imageheight, imagewidth) {
     HERE I NEED CODE TO HIDE ALL DIVS THAT HAS THE SPECIFIED FILESIZE, 
     IMAGEHEIGHT AND IMAGEWIDTH.
}
</script>

<div class="imagecontainer" filesize="279603" imageheight="500" imagewidth="380"
 onclick="hide('279603', '500', '380')">
  <img src="picturename.jpg">
</div>

<div class="imagecontainer" filesize="272655" imageheight="500" imagewidth="380"
 onclick="hide('272655', '500', '380')">
  <img src="picturename2.jpg">
</div>

你能理解我想做什么吗？我不知道根据这些标准“标记”div 以找到它们的有效方法。也许还有其他方法可以做到这一点？

Answer 1

如果您使用 jQuery，这将非常简单。它也可以直接用 Javascript 完成，但需要更多的努力。你的功能将是这样的:

<script>
 function hide(filesize, imageheight, imagewidth) {
    $('.imagecontainer[filesize="' + filesize + '"]' + '[imageheight="' + imageheight+ '"]' + '[imagewidth="' + imagewidth+ '"]').hide();
}
</script>

这是一个 working example

此外，我建议您使用以下属性:data-filesize、data-imageheight 和 data-imagewidth，以便您符合 HTML。