根據點擊的文字更改圖片來源？

Question

我想建立一個網頁，有以下幾點：

圖像的

Bob 
Mary 
Sue 
Jane 

<img src="none.jpg"> 
<img src="Bob.jpg"> 
<img src="Mary.jpg"> 
<img src="Sue.jpg"> 
<img src="Jane.jpg"> 

所有最初不可見（display: none;），除了none.jpg。當Bob被點擊時，沒有人應該消失，並且Bob應該變得可見。最簡單的方法是什麼？

JavaScript/JQuery是我正在嘗試使用的。我找到了可以切換顯示屬性的方法，但它很笨重，因爲它要求我發送有關所有關聯圖像的命令。

我知道解決方案涉及到加載所有圖像，然後只是改變其可見性，但更改來源將解決上述問題。

Answer 1

首先，給所有的圖像一個類（讓它叫picture）和所有的名稱鏈接另一個（讓我們打電話給一個name）。

//When a name is clicked. 
$(".name").click(function() { 
    //Hide all the pictures. 
    $(".picture").hide(); 
    //Get the name from the text of the link. 
    var name = $(this).text(); 
    //Show the one with the right name. 
    $(".picture[src=" + name + ".jpg]").show(); 
} 

如果你不想依靠鏈接文本和文件名（例如，如果他們不總是一致的），你可以使用自定義屬性，像data-name，你可以在jQuery的訪問與.attr("data-name")。

正如在評論中指出，也可能只是一個圖像（讓我們給它的ID picture這段時間），並改變其src屬性：

$(".name").click(function() { 
    //Get the name from the text of the link. 
    var name = $(this).text(); 
    //Change the src attribute. 
    $("#picture").attr("src", name + ".png"); 
}); 

請注意，這第二種方法將不會加載頁面加載時的所有圖像。相反，它們只會在鏈接被點擊時加載。這可能是好的（如果有很多並且可能不需要它們），或者不好（如果用戶不得不等待它們是個問題）。你可以繞過preloading。

此外，如果您還想設置src以外的其他屬性（如alt），則使用第一種方法可能會更容易。

Disclaimar：我還沒有測試代碼。