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

I have the following images displayed in gallery and I'm using lightbox to display this images. Now, I want to include a filter such that I have two buttons TH and TS. When I click on TH all images with prefix TH should be displayed and when I click on TS all images with prefix TS should be displayed in the gallery.
Below is the code -

我在画廊中显示以下图像,我使用灯箱显示此图像。现在,我想要包含一个过滤器,以便我有两个按钮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>

How can I filter this images in the gallery ased on the prefix of the image names

如何在图库中使用图像名称前缀过滤此图像

1 个解决方案

#1

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

Will give you all a-Tags with TS-images.

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

Replace TS with TH for the TH-images.

对于TH图像,用TH替换TS。

#1

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