使用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链接的定位标记包含图片时，我才能更改该条件才能满足的href attr 。 那么锚文本应该是img标签。

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

谢谢，vicky

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

只需使用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 3

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

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");
});

另外，我不得不提到<a>内的<img>并不总是对点击有响应

哦，是的， 拨弄 UPD我不知道该如何忘记过滤器

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

新的较短的演示

Answer 5

您也可以在不包含jQuery的情况下使用本机Javascript完成

element.setAttribute（属性名称，属性值）

希望这会帮助你。