javascript - 在 {display : none;} images 上停止 Lightbox2 画廊

Question

我目前正在使用 Lightbox2由 Lokesh Dakhar 在在线目录网站上显示产品图片库。

示例:

[Yellow Banana] [Red Apple] [Yellow Lemon]     ← Image Gallary

我还在使用客户端搜索过滤器(将结果缩小到特定信息)，如果数据输入与名称不匹配，它会通过附加 css 规则 display: none 来隐藏产品图片的产品。

示例:

Search: Yellow

结果:

[Yellow Banana] [Yellow Lemon]

我的问题是 Lightbox2 图库在 Lightbox 的“下一张图片”上这两个产品之间仍然显示 [Red Apple]。

有没有办法将 if 语句附加到 Lightbox 脚本，使其忽略当前附加了 display: none 的产品？

问题重现于:JSFiddle带文档。

Answer 1

这是您的 input 事件处理程序的一个版本，它可以解决问题。

document.getElementById("search").addEventListener("input", function() {
  var filter = this.value,
    pictures = $(".searchable");

  pictures.each(function() {
    if (this.dataset.index.toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
      $(this).show().find("a").attr("data-lightbox", "roadtrip");
    } else {
      $(this).hide().find("a").attr("data-lightbox", "ignore");
    }
  });
});

此代码使用 jQuery 来隐藏/显示过滤后的元素，而不是设置页内样式标签。

Lightbox 将具有相同 data-lightbox 属性的图像视为一组。要从组中排除图像，只需更改此属性(在我的示例中，忽略)。