Question

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

示例：

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

我还使用客户端搜索过滤器（将结果缩小到特定信息），如果数据输入与产品名称不匹配，则通过附加css规则display: none来隐藏产品图像。< / p>

示例：

Search: Yellow

结果：

[Yellow Banana] [Yellow Lemon]

我的问题是Lightbox2 gallary在Lightbox＆＃34;下一张图片＆＃34;这两个产品之间仍显示[Red Apple]。

有没有办法将if语句附加到灯箱脚本，使其忽略当前附加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属性时将其视为一个组。要从组中排除图像，只需更改此属性（在我的示例中，忽略）。

在{display：none;}图片上停止Lightbox2图库

1 个答案: