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>

你能理解我想做什么吗？我不知道有效的方法来标记＆＃34;根据这些标准找到它们的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标准。

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;
    }           
  }
}

隐藏具有特定属性的元素

2 个答案: