jquery - 使用 JQuery 和正则表达式解析文件名

Question

所以我有几个链接：

<a href="#">2k01</a>
<a href="#">3a01</a>
<a href="#">5a01</a>
etc...

当我点击一个链接时，我想显示一组与标签之间的文本相关联的图像。我有一个 images/ 文件夹，其中包含所有图像，图像名称的格式为“some text_2k01_some text”、“some text_3a01_some text”等。我只想显示带有单击链接内的文本的图像。我怀疑有一个使用 JQuery 和正则表达式的解决方案，但我找不到它。任何帮助将非常感激。

Answer 1

我认为您之前可以插入（作为data-*属性）您想要获取的图像的名称，就像这样

<a href="#" data-image="folder/your-image-2k01.jpg">2k01</a>
<a href="#" data-image="folder/other-image-3a01.jpg">3a01</a>
<a href="#" data-image="folder/foobar-image-5a01.jpg">5a01</a>

所以js会很简单

$(document).on('click', 'a[data-image]', function() {
   var $this = $(this),
       url   = $this.data('image'),
       img   = $('<img src="'+ url +'" />');

   $this.append(img);
})

而且你不会被文件名格式束缚得太深

Answer 2

不要为此使用正则表达式。您可以使用 jQuery：

jQuery("a").click(function() {
   var linkText = jQuery(this).text();
   var filename = "sometext_" + linkText + "_sometext";
   ...
   ...code to display your images
   ...
});

Answer 3

$('a').on('click', function(){
     $('img').hide();
     $('img[src|="' + $(this).text() + '"]').show();
});

当您单击链接时，它将在图像源包含的页面上找到所有图像（这就是它的|=作用）链接中的任何文本并显示它们。还首先隐藏所有图像，假设您只想要与显示的单击链接相关联的图像。