當用戶點擊一個鏈接時加載新圖片

我想弄清楚如何在單擊鏈接時加載帶有ajax的新圖像。當用戶點擊一個鏈接時加載新圖片

鏈接看起來像這樣（有幾個環節是這樣，他們幾乎沒有圖像縮略圖裏面他們，讓用戶可以大約知道當他/她點擊鏈接將加載哪些圖像在頁面上）：

<div class="box-content2"> 
    <a href="/path/to/image/2.jpg" id="2"> 
     <img src="/path/to/image/thumbnail/2.jpg" title="Image Title 2" /> 
    </a> 
    <a href="/path/to/image/3.jpg" id="3"> 
     <img src="/path/to/image/thumbnail/3.jpg" title="Image Title 3" /> 
    </a> 
</div>

Href屬性包含圖像的相對路徑，id是圖像名稱（如果相關，它也是數據庫中的id）。

而且在同一頁上我有這樣的標記：

<div id="media-photo"> 
    <img src="/path/to/image/1.jpg" alt="Image Title 1" />  
</div>

我想＃媒體照片DIV圖像更改，恕不頁面被重新加載。

這是我到目前爲止有：

$(document).ready(function() { 
    $('.box-content2 a').click(function() { 
     var path = $(this).attr('href'); 
     $('#media-photo img').html('<img src="' + path + '" />'); 
    }); 
});

不知道我在做什麼是可能的，也許我需要阿賈克斯？

來源

2009-09-01 Richard Knop

你肯定是在正確的軌道上：

$(document).ready(function() { 
    $('.box-content2 a').click(function() { 
     var path = $(this).attr('href'); 
     $('#media-photo img').attr('src', path) 
          .attr('alt', $('img', this).attr('title')); // in anticipation of your need 
     return false; // stop the default behavior (following the link) 
    }); 
});

來源

2009-09-01 23:05:12

我試過，當我點擊鏈接，我被帶到瀏覽器中的圖像URL。 – 2009-09-01 23:08:04

您還需要移除圖片上的錨定標記或將href更改爲像href =「＃」或href =「javascript：void（0）」之類的內容，以便它實際上不會鏈接到資源本身。然後你的JavaScript在這裏應該工作。 – jkelley 2009-09-01 23:11:03

@Richard Knop：我認爲你的編輯速度太快了。 – 2009-09-01 23:11:09

的html方法將它呼籲元素的HTML內容。

您的代碼將新的IMG元素放入舊的元素中，這是沒有意義的。

您需要使用attr方法來設置現有圖像的src屬性，像這樣：

$('#media-photo img').attr('src', path);

此外，您還需要添加return false;到結束（或者叫event.preventDefault()並採取事件參數）以防止瀏覽器跟隨鏈接。

來源

2009-09-01 23:10:04 SLaks

當用戶點擊一個鏈接時加載新圖片

回答

相關問題