javascript - 如何根据图库中图像名称的前缀过滤图像

Question

我在画廊中显示了以下图像，我正在使用灯箱来显示这些图像。现在，我想包括一个过滤器，这样我就有两个按钮 TH 和 TS。当我点击 TH 时，所有带有前缀 TH 的图像都应该显示，当我点击 TS 时，所有带有前缀 TS 的图像都应该显示在图库中。
下面是代码 -

<div id="vlightbox">
        <a id="firstImage" title="Bath Mat" href="images1/TH1.jpg" class="vlightbox">
            <img alt="Bath_Mat" src="images1/TH1.jpg"/>
            <p class="para">
                BATH MAT RUG - PINK<br>
                <strong>Material Used:</strong>Cotton<br>
                <strong>Design:</strong> Square |<strong> Colour:</strong> Pink<br>
                <strong>Size:</strong> As per requirement
            </p>
        </a>
        <a title="Bathmat Cotton Yellow" href="images1/TS1.jpg" class="vlightbox"><img alt="Bathmat-Cotton-Yellow" src="images1/TS1.jpg" />
            <p class="para">BATH MAT RUG - YELLOW<br>
                <strong>Material Used:</strong>Cotton<br>
                <strong>Design:</strong>Stripes | <strong>Colour: </strong>Yellow <br>
                <strong>Size:</strong> As per requirement
            </p>
        </a>
</div>  

如何根据图像名称的前缀过滤图库中的这些图像

Answer 1

$('a.vlightbox[href*="/TS"]');

将为您提供所有 a-带有 TS 图像的标签。

用 TH 替换 TH 图像的 TS。