抓取href並將其放在src上

我有一個div，帶有一串帶有href鏈接的完整圖像的縮略圖。因此，我不需要從網站上打開這張圖片，而是需要在第二個div中動態顯示此圖片。抓取href並將其放在src上

這裏就是我有「直到現在：

的HTML

<article id="thumbnails"> 

    <a href="large-image-1.jpg"> 
    <img class="image-99" alt="97" src="thumbnail-1.jpg"> 
    </a> 

    <a href="large-image-2.jpg"> 
    <img class="image-98" alt="96" src="thumbnail-2.jpg"> 
    </a> 

    <a href="large-image-3.jpg"> 
    <img class="image-97" alt="95" src="thumbnail-3.jpg"> 
    </a> 

</article>

<div id="large-image"> 
    <img id="xxl" src="" title=""> 
</div>

jQuery的

$(document).ready(function() { 

    $('#thumbnails').on('click','a', function(event) { 

    var toLoad = $(event.target).append('<img src="' + 'attr('src').jpg />"'); 
    $('#large-image').fadeOut('fast',loadContent); 

    function loadContent() { 
     $('#large-image').load(toLoad,'',showNewContent); 
    } 

    function showNewContent() { 
     $('#large-image').fadeIn('normal'); 
    } 

    return false; 
    });

我還做了一個codepen of it來說明它更好。

我正在考慮的一種替代方法是記錄點擊圖像href並用attr()這個東西替換另一個div的src。但我迷失在如何做到這一點。

來源

2014-01-17 Digger

您還可以嘗試獲取鏈接的href並更改目標圖像的src。

var largeImage = $('#large-image img'); 

$('#thumbnails a').click(function(e){ 
    e.preventDefault(); 

    var imageUrl = $(this).attr('href'); 

    largeImage.attr('src', imageUrl); 
});

Example on JS Bin

來源

2014-01-17 19:01:11 fabiofl

完美！像魅力一樣工作！非常感謝你的男人！ – Digger

不客氣！ :) – fabiofl

$('#thumbnails').on('click','a', function(event) { 
    var toLoad = $(this).append('<img src="' + this.href + '.jpg" />'); 

    //Rest of code 
});

編輯：上面的代碼將獲得點擊鏈接的href屬性，並將其添加到圖像的src。

來源

2014-01-17 18:44:55 Krishna

這個答案是沒有多大用處的人沒有你真正解釋你的代碼，而不是僅僅張貼 – Bojangles

@Bojangles塊 - 謝謝，我想OP會理解的。另一種方法是記錄點擊圖像href並用attr（）thing_替換另一個div的src。答案就是基於此。 – Krishna

謝謝@克里希納！另一個答案得到了我想要的，但這一個也適用。 – Digger

抓取href並將其放在src上

回答

相關問題