如何獲取img的ID，然后使用它來更改DIV的內容

Question

好的，所以我有一系列圖像，當單擊這些圖像時，將使用該圖像的ALT文本更改DIV的內容。 這是該代碼-

$(function() {
  $('#dalton').click(function() {
    var alt = $(this).attr('alt');
    $('.article_desc').html(alt);
  });

  $('#rutherford').click(function() {
    var alt = $(this).attr('alt');
    $('.article_desc').html(alt);
  });

});

而且我的工作效果還不錯，但是問題是，如果頁面中有多個圖像，我該如何優化代碼，而不必為每個圖像重復它？

我考慮過為圖片ID設置一個變量-

$(function() {
$('img').click(function() {
var imgid = this.id;

但是我不知道如何將兩者結合在一起。

編輯：這是該部分的HTML：

 <section class="section1"> <article> <ul> <li><img src="plumpudding.gif" id="dalton" alt="Lorem ipsum dolor sit amet"></li> <li><img src="rutherford.png" id="rutherford" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit</li> <li><img src="bohr.gif" id="bohr" alt="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi"></li> </ul> <div class="clearfix"></div> <div class="article_desc" id="article_desc">Click on the picture for description.</div> </article> </section> 

Answer 1

嘗試此操作。...以便您可以獲得所有單擊的圖像alt信息。請注意，所有img標簽必須具有class='image'並為要顯示alt信息的文本區域id= 'article_desc'定義id。

$('.image').click(function() {
    var alt = $(this).attr('alt');
    $('#article_desc').append(alt);
});

Answer 2

在此處創建命名函數可能會有所幫助。

$(function () {
    $("#dalton").click(setDescriptionToAlt);
    $('#rutherford').click(setDescriptionToAlt);

    // OR use a class given to each element.

    $(".image-with-alt").click(setDescriptionToAlt);
});

function setDescriptionToAlt() {
    var alt = $(this).attr("alt");
    $(".article_desc").html(alt);
}

通過使用命名函數，您只需要引用它即可，而不必每次都復制內聯匿名函數。 從那里，您可以決定對所需的每個元素ID進行一次click事件，或者可以為要受影響的每個元素分配一個類，並使用該類。

Answer 3

使用類名代替元素的id

$('.image').click(function() {
    var alt = $(this).attr('alt');
    $('.article_desc').html(alt);
});