2011-02-09 57 views
1

我有一個腳本來改變一個div(main_view)中顯示的IMG SRC在另一個DIV(圖庫)的圖像被點擊時:如何使用Jquery更改另一圖像的<a href「」onclick?

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的值。有人可以幫幫我嗎??

感謝, 特蕾西

回答

0

首先,我不建議使用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股利。我也從圖像標籤中抓取圖像標題。

我沒有測試過這個,但它應該可以工作。

+0

的代碼基本相同,您可以使用`this.href`,`this.title`代替'`標籤。 ;) – 2011-02-10 01:13:49

相關問題