隱藏具有特定屬性的元素

Question

我有一個腳本，列出了幾千個圖像，每個圖像都在一個單獨的div中。 像這樣的東西：

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

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

我想要做的是，以某種方式用文件大小和尺寸標記div，所以我很容易隱藏重復的圖像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>

這是一個有效的例子

此外，我建議您使用以下屬性：data-filesize，data-imageheight和data-imagewidth，以便您符合HTML標准。

Answer 2

由於您擁有每個元素的類名，因此您只需獲取該類的所有元素即可。 最快的方法是對所有元素進行線性搜索。

function hide(filesize, imageheight, imagewidth) {
  filesize    = (filesize).toString();
  imageheight = (imageheight).toString();
  imagewidth  = (imagewidth).toString();

  var els = document.getElementsByClassName('imagecontainer');

  for(var i = 0; i < els.length; ++i) {
    var el = els[i];
    var fsize = el.getAttribute('filesize');
    var iheight = el.getAttribute('imageheight');
    var iwidth = el.getAttribute('imagewidth');

    if(fsize === filesize && imageheight === iheight && iwidth === imagewidth) {
       el.style.display='none'; 
       break;
    }           
  }
}