如何使用jquery链接单个图像

Question

<div class="test">
    <a href="test_A.png"><img src="test_a_logo.png"  alt="" width="469" height="87" class="thumb" title="" /></a>
    <a href="test_B.png"><img src="test_b_logo.png" alt="" width="469" height="87" class="thumb" title=""  /></a>
    <a href="test_C.png"><img src="test_c_logo.png" alt="" width="469" height="87" class="thumb" title="" /></a>
</div>

使用上面的代码，如果我想给每个 href=".png" 一个可点击的链接，应该如何编写代码？

我尝试过使用这样的 wrap() 函数。

$("img").each( function() {
    var $img = $(this),
        href = $img.attr('src');
    $img.wrap('<a href="test.com" "class="test"></a>');
}); 

它将带我到 test.com，但所有图片都带我到同一个站点，我怎样才能使其独立，以便每个 img 都可以转到他们自己的站点？

Answer 1

你想要这样的东西吗？演示http://jsfiddle.net/yeyene/85Ydt/

将带有您单独页面名称的target标签添加到您的图像中。然后，获取这个目标链接并用 jquery 包装每个链接。

HTML

<div class="test">
    <img target="test1.html" src="test_a_logo.png"  alt="" width="469" height="87" class="thumb" title="" />   
    <img target="test2.html" src="test_b_logo.png" alt="" width="469" height="87" class="thumb" title=""  />    
    <img target="test3.html" src="test_c_logo.png" alt="" width="469" height="87" class="thumb" title="" />    
</div>

JQUERY

$(document).ready(function(){
    $("img").each( function() {
        $(this).wrap('<a href="'+$(this).attr('target')+'" "class="test"></a>');
    }); 
});

Answer 2

假设你有这个 HTML

<div class="test">
    <img src="test_a_logo.png" alt="" width="469" height="87" class="thumb" title="" />
    <img src="test_b_logo.png" alt="" width="469" height="87" class="thumb" title="" />
    <img src="test_c_logo.png" alt="" width="469" height="87" class="thumb" title="" />
</div>

使用下面的JS会将数组中的每个站点追加到对应的图片索引
（.test中的位置从0开始）

var arr_sites = ['test1.com', 'test2.com', 'test3.com']

$(".test img").each(function (indx) {
    $(this).wrap('<a href="'+arr_sites[indx]+'" "class="test"></a>');
});

Answer 3

这是工作 DEMO http://jsfiddle.net/wXL6C/1/

您希望这些“href="test_A.png" 到 A.com href="test_b.png" 到 B.com 等等”

所以这是工作代码

$(document).ready(function(){
  $("img").each( function() {
      $(this).wrap('<a href="'+$(this).attr('src').substring(5,6).toUpperCase()+'.com" >  </a>');
  }); 

});

Answer 4

如果您始终使用string_url_string 格式，则可以使用split() 获取url：

$('img').map(function() {
    var url = this.src.split('_')[1];
    $(this).wrap('<a href="http://www.' + url + '.com">');
});

这假设您的所有链接都以 www 为前缀并以 .com 结尾（可能并非总是如此）。

Here's a fiddle

更好的方法是使用 HTML5's data attributes - 并将 URL 存储在其中：

<img src="test_a_logo.png" data-url="http:/www.a.com/" ... />

然后再次换行，并使用data-url：

$('img').map(function() {
  var $this = $(this);
  $this.wrap('<a href="' + $this.data('url') + '">');
});

Fiddle