无法识别元素显示值
我有图片库类型的网页。它是由图片缩略图组成的网格，下面有指定的标签。
页面顶部是所有标签的列表，格式为按钮。用户可以点击一个或多个标签按钮来过滤照片。我使用同位素js来进行过滤。这个很好用。
然而，我想添加一个新的特性，在同位素过滤之后运行，它将隐藏没有分配给任何剩余的过滤照片的任何标记按钮。
我的计划是：
- 标识所有可见照片
- 从可见照片标记创建数组
- 使用数组隐藏任何不匹配的标记
然而，在我点击标签按钮和同位素进行过滤之后，我在识别可见的照片时遇到了问题。
看起来会很简单。同位素js会改变特定元素的display = "none"，以获取隐藏的照片。如果我检查这个元素，我可以看到隐藏元素有display = "none"
我创建了一个‘visibletag’函数，该函数在标记按钮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()‘函数作为单击事件上的另一个按钮运行，在同位素过滤完成后，我手动单击该按钮。这将成功地获得所有照片元素显示值。所以这部分代码确实有效。
那么，我现在的问题是，在同位素过滤之后，如何运行‘visibletag()’函数，使其成为一组完整的代码？
我试图将'visibletags()‘函数改为$('.filter-button').mouseup(function()运行，但没有得到过滤结果。
也许这是现在普遍的Javascript问题，例如如何在on click事件被呈现后获得它们的结果？
回答 1
Stack Overflow用户
发布于 2020-01-02 09:58:57
我不熟悉同位素，但您可能需要使用回调函数。查看这些文档，特别是layoutComplete部分：https://isotope.metafizzy.co/events.html
在您的例子中，结果可能是这样的：
$('.filter-button').on('click', function() {
// initialize isotope
$isotope.on('layoutComplete', function() {
visibletags();
});
// other isotope code here
}https://stackoverflow.com/questions/59560479
复制相似问题
腾讯云开发者
