如何使用 Jquery 更改另一个图像的 <a href"" onclick?
Posted
技术标签:
【中文标题】如何使用 Jquery 更改另一个图像的 <a href"" onclick?【英文标题】:How can I change the <a href"" onclick of another Image with Jquery? 【发布时间】:2011-06-24 11:58:21 【问题描述】:当点击另一个 div(图库)中的图像时,我有一个脚本可以更改 div(main_view)中显示的 img src:
JS
//Swap Image on Click
$("ul.thumb li a").click(function()
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr( src: mainImage );
return false;
);
HTML
<div id="gallery">
<ul class="thumb">
<li><a href="images/childrentxt.png"><img src="images/buttons/kids.png"
title="children.htm" /></a></li>
<li><a href="images/martialartstxt.png"><img src="images/buttons/dee.png"
title="mma.htm" /></a></li>
<li><a href="images/cardiotxt.png"><img src="images/buttons/cardio.png"
title="fitness.htm" /></a></li>
<li><a href="images/combattxt.png"><img src="images/buttons/tristan.png"
title="combat.htm" /></a></li>
</ul>
</div>
<div id="main_view">
<a href="fitness.htm" title="Mixed Martial Arts" target="_self">
<img src="images/maintxt.png" /></a>
</div>
然后我想允许用户单击 main_view div 中显示的图像以导航到与该图像关联的页面。
我是 jquery 和 js 的新手,并没有成功编写脚本来执行此操作。
目前在“gallery's a href”中可以找到“main_view's img src”。我一直在尝试使用“gallery img title”来存储用于更新“main_view a href”onclick 的值。有人可以帮帮我吗??
谢谢, 特蕾西
【问题讨论】:
【参考方案1】: $("ul.thumb li a").click(function()
$("#main_view img").attr('src', $(this).attr("href"));
return false;
);
或完全摆脱 a href 并将点击与图像联系起来
$("ul.thumb li img").click(function()
$("#main_view img").attr('src', $(this).attr("title"));
return false;
);
【讨论】:
OP 的原始方法通过map
对象有什么问题?它基本上与您建议的代码相同【参考方案2】:
首先,我不建议使用title
属性来存储href
。标题是为了别的东西。相反,更好的属性是rel
。
所以,这就是我的做法。我会将title
属性更改为rel
,然后添加带有图像标题的title
属性。
<div id="gallery">
<ul class="thumb">
<li><a href="images/childrentxt.png"><img src="images/buttons/kids.png"
rel="children.htm" title="Name of image 1" /></a></li>
<li><a href="images/martialartstxt.png"><img src="images/buttons/dee.png"
rel="mma.htm" title="Name of image 2" /></a></li>
<li><a href="images/cardiotxt.png"><img src="images/buttons/cardio.png"
rel="fitness.htm" title="Name of image 3" /></a></li>
<li><a href="images/combattxt.png"><img src="images/buttons/tristan.png"
rel="combat.htm" title="Name of image 4" /></a></li>
</ul>
</div>
<div id="main_view">
<a href="fitness.htm" title="Mixed Martial Arts" target="_self">
<img src="images/maintxt.png" /></a>
</div>
现在是 JS:
$("ul.thumb li a").click(function()
var mainImage = $(this).attr("href"); // Find Image URL
var imgLink = $(this).children('img').attr('rel'); // Find the image link in rel
var imgTitle = $(this).children('img').attr('title'); // Find the image title
$("#main_view").html('<a href="' + imgLink + '" title="' + imgTitle + '" target="_self"><img src="' + mainImage + '" /></a>');
return false;
);
所以,我不只是更改 img src,而是填充整个 #main_view
div。我还从图片标签中获取了图片标题。
我没有对此进行测试,但它应该可以工作。
【讨论】:
您可以只使用this.href
、this.title
作为<a>
标签。 ;)
非常感谢!你让它看起来这么容易!我非常感谢使用“rel”标签而不是“title”标签的提示。
如果这能成功投票并接受答案,那就太好了:)
你的回答对我有用,我点击了“检查”图标,但我无法点击“赞成票”图标,因为这是我第一次使用这个网站:(我收到一条消息表明我必须拥有超过 15 岁的声誉才能投票......但我真的很感激!以上是关于如何使用 Jquery 更改另一个图像的 <a href"" onclick?的主要内容,如果未能解决你的问题,请参考以下文章