Question

我有照相馆类型的网页。它由照片缩略图的网格组成，并在其下方分配了标签。

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

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

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

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

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

似乎很简单。同位素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（）”功能作为单击事件的另一个按钮，该事件在同位素过滤完成后手动单击。这样可以成功获取所有照片元素的显示值。这样，那部分代码即可工作。

所以我现在的问题是如何在同位素过滤之后以一种完整的代码集的方式运行“ 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 
}

无法识别元素显示值

1 个答案: