將img src存儲在一個javascript變量中

當我點擊圖片時，我想將特定圖片src存儲在一個Javascript變量中。我怎樣才能做到這一點？請記住<a>標籤用於懸停效果。所以當我點擊<a>我想要它的兄弟姐妹的圖像源。將img src存儲在一個javascript變量中

<div> 
    <img src = "http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg"/> 
    <a href = "#"></a> 
</div> 

<div> 
    <img src = "http://whatiscat.com/wp-content/uploads/2011/07/cute_cat_2.whatiscat.com_.jpg"/> 
    <a href = "#"></a> 
</div>

來源

2012-07-01 user1481563

你的意思是源作爲*圖像的數據*，或只是'IMG src'屬性值？像'$ a.siblings（'img'）。prop（'src'）'？ –

你的意思是你想要將圖像的url存儲在js變量中，或者將圖像的實際二進制數據存儲在js變量中？ –

我的意思是網址。 – user1481563

$("a").on("click", function() { 
    alert ($(this).siblings("img").attr("src")); 
});

demo

...

個

只更新

JS - http://jsfiddle.net/FVrTg/7/

var links = document.getElementsByTagName("a"); 
var size = links.length; 

for (var i = 0; i < size; i++) { 
    links[i].addEventListener("click", function() { 
     alert(this.previousSibling.previousSibling.getAttribute("src")); 
    }, false); 
}

來源

2012-07-01 23:53:27

+1，先用正確的代碼用'siblings（）'回答。 –

@JonathanM thx :) –

不錯！有一個純JavaScript的做法呢？ – user1481563

$('a').click(function(e){ 
    e.preventDefault(); 
    var src = $(this).siblings('img').prop('src'); 
})

http://jsfiddle.net/FVrTg/5/

來源

2012-07-01 23:52:14 undefined

謝謝。你知道如何做到這一點，而不使用jQuery？ – user1481563

如何通過單擊瀏覽按鈕將圖像的路徑存儲在用戶已選擇的JS變量中？ – Faizan

上document使用click委託的事件，爲了提高效率，並得到parentNode的<a>。然後抓住<img>並得到src。通過parentNode，您可以安全地添加到您的設計中，而無需更改代碼。

演示：http://jsfiddle.net/ThinkingStiff/NWD7f/

document.addEventListener('click', function(event) { 

    var a = event.target; 

    if(a.tagName.toLowerCase() == 'a') { 

     var src = a.parentNode.getElementsByTagName('img')[0].src; 
     console.log(src); 

    }; 

}, false);

來源

2012-07-02 00:10:26 ThinkingStiff

對於每一次點擊頁面？我想這是一種方法。國際海事組織，「document.getElementsByTagName」是一個「更清潔」的方法，我仍然覺得有點調皮提示。 –

@JaredFarrish代表比每個圖像上的事件更有效率。就像jQuery一樣，庫如何推薦處理事件（並且正在用'.on（）'函數推動它）。 – ThinkingStiff

是的，但它不必在['document']（https://developer.mozilla.org/en/DOM/element.addEventListener）上，是嗎？（編輯：雖然我可以在代表的意義上看到你的意思，但它只是感覺噁心，我可能會克服，我想。） –

這裏有一個方法，將打印img.src出使用rel="img-id"到相關的a到img：

HTML

<div> 
    <img id="img-1" src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/26/YellowLabradorLooking_new.jpg/260px-YellowLabradorLooking_new.jpg"/> 
    <a href="#" class="img-hover" rel="img-1"></a> 
</div>

的Javascript

window.onload = function(){ 
    var links = document.getElementsByTagName('a'), 
     c_links = links.length, 
     link; 

    while (c_links--){ 
     link = links[c_links]; 

     if (link.className.indexOf('img-hover') > -1) { 
      link.onclick = function(){ 
       var img = document.getElementById(this.rel); 

       if (img) { 
        console.log(img.src); 
       } 
      }; 
     } 
    } 
};

http://jsfiddle.net/userdude/ecXCX/

來源

2012-07-02 00:15:30

將img src存儲在一個javascript變量中

回答

相關問題