如何使用Jquery更改另一图像的<a href“”onclick？

Question

我有一个脚本来改变一个div（main_view）中显示的IMG SRC在另一个DIV（图库）的图像被点击时：

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" alt="" /></a> 
</div> 

然后我想允许用户单击main_view div中显示的图像以导航到与该图像关联的页面。

我是jquery和js的新手，并没有成功地编写脚本来做到这一点。

目前在“gallery's a href”中找到了“main_view的img src”。我一直在尝试使用“gallery img title”来存储用于更新“main_view a href”onclick的值。有人可以帮帮我吗？？

感谢， 特蕾西

Answer 1

首先，我不建议使用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" alt="" /></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 + '" alt="" /></a>'); 
    return false; 
}); 

所以，而不只是改变了IMG SRC，我只是填充整个#main_view股利。我也从图像标签中抓取图像标题。

我没有测试过这个，但它应该可以工作。

Answer 2

$("ul.thumb li a").click(function() { 
    $("#main_view img").attr('src', $(this).attr("href")); 
    return false; 
    }); 

或完全得到摆脱一个HREF和领带的点击图像

$("ul.thumb li img").click(function() { 
    $("#main_view img").attr('src', $(this).attr("title")); 
    return false; 
    });