Question

所以我有几个链接：

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

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

Answer 1

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

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

Answer 2

我认为您之前可以插入 - 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 3

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

当您点击链接时，它会在页面上找到图像源所包含的所有图像（这就是|=所做的）链接中的任何文本并显示它们。同时隐藏所有图像，假设您只需要与所显示的点击链接相关联的图像。

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

3 个答案: