0 
<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 都可以访问他们自己的站点？

4

4 回答 4

0

你想要这样的东西吗？演示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>

查询

$(document).ready(function(){
    $("img").each( function() {
        $(this).wrap('<a href="'+$(this).attr('target')+'" "class="test"></a>');
    }); 
});
于 2013-06-14T10:24:45.033 回答
0

鉴于你有这个 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>');
});
于 2013-06-14T10:24:51.017 回答
0

这是工作演示 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>');
  });

});

于 2013-06-14T10:32:03.120 回答
0

如果你总是有格式string_url_string，你可以split()用来获取url：

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

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

这是一个小提琴

更好的方法是使用HTML5 的数据属性- 并将 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') + '">');
});

小提琴

于 2013-06-14T10:33:28.513 回答