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

Question

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

例如：

<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 attr 这个条件只有在href链接的锚标签包含图像时才应该满足。那么锚文本应该是img标签。

这是 JSFIDDLE： http://jsfiddle.net/HMsSE/9/ 任何建议将不胜感激。

谢谢， 维姬

Answer 1

您可以尝试使用 .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');

Answer 2

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

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

在您的 cmets 中，当 href 的标签具有子元素 img 时，您正尝试更改它。如果是这样，

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

Answer 3

只需使用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');

Answer 4

按照 topicstarter 的要求，点击图片时会执行更改

$('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

Answer 5

您也可以在不包括 jQuery 的情况下使用本机 Javascript 来执行此操作

element.setAttribute(attributename,attributevalue)

希望这会对你有所帮助。