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 隐藏/显示过滤的元素，而不是设置页内样式标记。

当图像具有相同的 data-lightbox 属性时，

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