使用jquery动态更改图像的href路径

时间:2013-07-04 06:17:03

标签: javascript jquery html image jquery-plugins

我不确定是否可能,但有人知道如果可能的话建议我。

例如:

<a href="image/image.jpg"><img src="image/image.jpg" alt="image"/></a>

在此如何使用jquery动态地将href路径更改为另一个图像。 即,

<a href="image/img.jpg"><img src="image/image.jpg" alt="image"/></a> like this.

编辑: 如果

<a href="#"><img src="image/image.jpg"/></a>
<a href="http://stackoverflow.com"><img src="image/image.jpg"/></a>
<a href="image/image.jpg"><img src="image/image.jpg"/></a>

如果href链接的锚标记包含图像,那么条件应该满足的href attr怎么办?那么锚文本应该img标记。

这是JSFIDDLE: http://jsfiddle.net/HMsSE/9/ 任何建议都会非常感激。

谢谢, 维基

5 个答案:

答案 0 :(得分:2)

您可以尝试使用.attr()函数将href设置为新值:

$('a[href="image/image.jpg"]').attr('href', 'image/img.jpg');

当然,如果你给锚一个唯一的id可能会更容易:

<a href="image/image.jpg" id="myLink"><img src="image/image.jpg" alt="image"/></a>

这样您就可以更轻松地选择它:

$('#myLink').attr('href', 'image/img.jpg');

答案 1 :(得分:2)

只需使用attr功能

即可
$('a').attr('href','image/img.jpg');

你也可以通过更有用的id来改变它

<a id="myLink" href="image/image.jpg"><img src="image/image.jpg" alt="image"/></a>

$('#myLink').attr('href','image/img.jpg');

答案 2 :(得分:2)

您也可以尝试使用.prop()

$('a').prop('href', 'image/img.jpg')

根据您的评论,当您拥有子元素href时,您会尝试更改a img标记。如果是的话,

if($('a').find('img').length) {  // it return the no. of img tag within a
   $('a').prop('href', 'image/img.jpg');
}

答案 3 :(得分:2)

作为主题启动者,更改执行图像点击

$('img').click(function() {
    $(this).parent('a').attr("href","image/img.jpg");
});

如果你想检查href,你必须使用条件

$('a').click(function() {
    event.preventDefault();
    if ($(this).attr('href').search('jpg')!=-1)
        $(this).attr("href","image/img.jpg");
});

另外,我必须提到<img>内的<a>并不总是对点击进行响应

是的,fiddle UPD 我不知道怎么会忘记过滤器

$('a').click(function() {
    event.preventDefault();
    $(this).filter('[href*=jpg],[href*=png],[href*=gif]').attr("href","image/img.jpg");
});

new shorter demo

答案 4 :(得分:0)

您也可以在原生Javascript中执行此操作,而不包括jQuery

  

element.setAttribute(的AttributeName,的AttributeValue)

希望这会对你有所帮助。