无法识别元素显示值

Question

我有相册类型的网页。它由照片缩略图网格组成，缩略图下方有指定的标签。

页面顶部是所有标签的列表，格式为按钮。用户可以点击一个或多个标签按钮来过滤照片。我正在使用 Isotope js 进行过滤。这很好用。

但是我想在同位素过滤后运行秒添加新功能，该功能将隐藏任何未分配给任何剩余过滤照片的标签按钮。

我的计划是执行以下操作：

识别所有可见的照片
从可见照片的标签创建数组
使用数组隐藏任何不匹配的标签

但是，在我单击标签按钮并且 Isotope 进行过滤后，我在识别可见照片时遇到了问题。

看起来会很简单。 Isotope js 改变指定元素的 display = "none" 为隐藏的照片。例如，如果我检查元素，我可以看到隐藏元素有 display = "none"

我创建了一个 'visibletags' 函数，它在标记按钮 on click 的末尾调用，以查找 display != "none":

处的元素

$('.filter-button').on('click', function() { 
    // isotope code here 
    // isotope hides some photos setting their div's `display = "none"` 

    visibletags();
}

function visibletags(){
    var imgdivs = document.querySelectorAll('.imgdiv');
    var showtags = [];

    for (var i=0, max=imgdivs.length; i < max; i++) {
        if (window.getComputedStyle(imgdivs[i]).display != "none") {
            // this should be a div that is not hidden by Isotope js 
            // so loop through it's tags to build array
            // array will be used later to hide unmatched tags 
            var phototagspans = imgdivs[i].querySelectorAll('.photo-tag');              
            for (var j=0, max=phototagspans.length; j < max; j++) { 
                showtags.push(phototagspans[j].className);
            }
        }
    }
}

但我无法识别元素的 display 值。我试过使用 window.getComputedStyle(imgdivs[i]).display、imgdivs[i].display 和 imgdivs[i].style.display

编辑修改问题：

我测试了运行将 'visibletags()' 函数作为单击事件的另一个按钮，我在同位素过滤完成后手动单击了该按钮。这样就成功获取到了所有photo元素的显示值。所以那部分代码确实有效。

所以我现在的问题是如何运行 'visibletags()' 在同位素过滤后以一种完整的代码集的方式发挥作用？

我尝试将 'visibletags()' 函数更改为运行作为 $('.filter-button').mouseup(function() 但没有得到过滤结果。

也许这是现在的一般性 Javascript 问题，例如如何在呈现 on click 事件结果后获得这些结果？

Answer 1

我不熟悉同位素，但您可能需要使用回调函数。查看此文档，尤其是 layoutComplete 部分：https://isotope.metafizzy.co/events.html

在你的情况下，结果可能是这样的：

$('.filter-button').on('click', function() { 
  // initialize isotope
  $isotope.on('layoutComplete', function() {
    visibletags();
  });
  // other isotope code here 
}

无法识别元素显示值

Not able to identify element display values

javascript

css

jquery-isotope