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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17463110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 08:26:03  来源:igfitidea点击:

Dynamically Change the href path of image using jquery

javascriptjqueryhtmlimagejquery-plugins

提问by Vignesh Pichamani

I am not sure is possible or not but someone know suggest me if possible.

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

For example:

例如:

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

in this how to change the href path to another image dynamically using jquery. i.e.,

在此如何使用 jquery 动态更改另一个图像的 href 路径。IE,

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

EDITED:If

编辑:如果

<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>

How can i vary this href attrthat condition should satisfy only when the anchor tag of href link contain image. then the anchor text is should imgtag.

href attr只有当 href 链接的锚标记包含图像时,我才能改变条件应该满足的条件。那么锚文本应该是img标签。

Here is the JSFIDDLE:http://jsfiddle.net/HMsSE/9/Any suggestion would be much appreciated.

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

Thanks, vicky

谢谢,维琪

回答by Darin Dimitrov

You could try using the .attr()function to set the href to the new value:

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

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

Of course it probably would be easier if you give the anchor an unique id:

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

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

So that you could more easily select it:

以便您可以更轻松地选择它:

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

回答by sdespont

Just use attrfunction

只需使用attr功能

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

You can change it also by id which would be more useful

您也可以通过 id 更改它,这会更有用

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

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

回答by Praveen

Also you can try using .prop()

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

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

From your comments, you're trying to change the hrefof atag when it has a child element img. If so,

根据您的评论,您正试图更改hrefofa标签,因为它有一个子元素img。如果是这样,

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

回答by vladkras

as topicstarter aksed, change performs on image click

正如 topicstarter 所说,更改在图像点击时执行

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

if you want to check href too, you have to use a condition

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

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

also, I have to mention that <img>inside <a>is not always responsive for click

另外,我不得不提到,<img>内部<a>并不总是响应点击

oh yeah, fiddleUPDI don't know how could I forget about filter

哦,是的,拨弄UPD我不知道我怎么能忘记过滤器

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

new shorter demo

新的更短的演示

回答by Ali

You can also do this in native Javascript without including jQuery

您也可以在不包含 jQuery 的情况下在原生 Javascript 中执行此操作

element.setAttribute(attributename,attributevalue)

element.setAttribute(属性名,属性值)

Hope this will help you.

希望这会帮助你。