jQuery：如何將「src」屬性寫入子元素的Onclick函數參數

我使用jQuery來重寫DOM以將無JS HTML頁面轉換爲JS驅動器頁面。我在轉換圖片鏈接時遇到了一個小問題。在原來的代碼，我有：jQuery：如何將「src」屬性寫入子元素的Onclick函數參數

<div class="f"> 
    <a href="images/Fig-03-2.png" target="_blank"> 
     <img src="images/fig-03-2.png" alt="Fig 3.3" /> 
    </a> 
</div>

...我希望把它改造成：所以它包含img src

<div class="f"> 
    <a> 
     <img src="images/fig-03-2.png" alt="Fig 3.3" onclick="imagepop("fig-03-2.png")/> 
    </a> 
</div>

我無法弄清楚如何寫onclick屬性價值爲imagepop的論點。我試過了：

$(".f a").attr('onclick', 'imagepop(' + $(this).attr('src') + ')');

...但是$(this).attr('src')返回「undefined」。

我應該如何修復我的代碼行，或者更好地從imagepop函數中讀取img src屬性？

**請注意，我還沒有開發頁面，以便每個div都有唯一的ID，並且不打算這樣做。 <div>標籤內沒有任何元素具有分配給它們的ID。

來源

2011-08-04 Brandon Lebedev

你忘了在JS代碼字符串中加引號/轉義，所以它顯示爲'imagepop（http://www.example.com/images/fig-03-2.png）'顯然不會工作。然而，在任何情況下，設置來自字符串的事件處理程序屬性都是非常不可靠的跨瀏覽器，而且首先是一個壞主意。您可以將一個事件處理程序設置爲DOM'element.onclick'到一個Function對象，或者您可以像在TJ的回答中一樣使用jQuery方式，但是不要將JS代碼放入字符串中。 – bobince

另外，請保留'href's，這樣它們仍然可以作爲我們可以關注的正常鏈接，鍵盤 - 導航中間點擊換新標籤等。 – bobince

...我希望把它改造成...

對於它的價值，我不會。相反，我會使用這樣的功能：

$("div.f a img").click(function() { 
    imagepop(this.src); 
    return false; 
});

那是什麼線，大概裹在ready處理程序，做的是：如果用戶點擊圖片，它的imagepop事情並取消事件（除其他外）防止鏈接被觸發。

它被稱爲漸進增強。啓用JavaScript的用戶代理將使用上述功能，而未啓用JavaScript的用戶代理仍將看到並遵循鏈接。請記住，用戶代理不僅僅是瀏覽器，它們包括抓取工具，蜘蛛等，是的，禁用JavaScript的瀏覽器。

更新：如果你真的想在鏈路層（這可能是更加鍵盤友好的）來處理它，而不是圖像的水平，那麼：

$("div.f a").click(function() { 
    var img = $(this).find("img"); 
    if (img[0]) { 
     imagepop(img[0].src); 
     return false; 
    } 
});

...因爲它是img，而不是a，具有src的元素。（而無需使用attr這裏，src反射屬性由所有主要支持的 - 也許所有的小 - 瀏覽器）。

來源

2011-08-04 22:13:31

好吧 - 但我想讓onclick處理程序成爲在''元素上，而不是''。你會如何建議改變它？ 'imagepop（this。（「img」）。src）;'？ –

@Alien：我只是覺得你可能會想要這個，並且更新了答案。大聲笑！ :-) –

它的工作原理。感謝有關漸進增強的額外信息。 –

試試這個：

$('.f a').onclick(function(e){ 
imagepop($(this).find('img').attr('src')); 
e.preventDefault(); 
});

基本上，它選擇了所有的錨點在.f類下，並將onclick應用到它們中的每一個。在onclick函數中，我們引用this這是當前的錨標記，並通過一個jQuery對象。這使我們可以找到該錨定標記下的所有img元素，將其拉動爲src屬性，並通過imagepop()運行它。

來源

2011-08-04 22:21:33 Shea

dang ...我總是太慢。 = [ – Shea

也許吧，但是我想我以前見過你的一兩個人 –

jQuery：如何將「src」屬性寫入子元素的Onclick函數參數

回答

相關問題