HTML

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

你想要这样的东西吗？ DEMO 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') + '">');
});

如何使用jquery链接单个图像

4 个答案:

HTML

JQUERY

Here's a fiddle

Fiddle