0

だから私はいくつかのリンクを持っています：

<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と正規表現を使用した解決策があると思いますが、見つけることができませんでした。どんな助けでも大歓迎です。

4

3 に答える 3

0

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);
})

ファイル名の形式に強く縛られることはありません

于 2012-05-31T16:26:05.557 に答える
0

これには正規表現を使用しないでください。jQueryを使用できます。

jQuery("a").click(function() {
   var linkText = jQuery(this).text();
   var filename = "sometext_" + linkText + "_sometext";
   ...
   ...code to display your images
   ...
});
于 2012-05-31T16:23:26.570 に答える
0 
$('a').on('click', function(){
     $('img').hide();
     $('img[src|="' + $(this).text() + '"]').show();
});

リンクをクリックすると、画像ソースに含まれているページ上のすべての画像が検索され（これ|=が実行されます）、リンク内のテキストがすべて表示されます。また、表示されているクリックされたリンクに関連付けられている画像のみが必要であると想定して、最初にすべての画像を非表示にします。

于 2012-05-31T16:30:07.083 に答える