imgのIDを取得してDIVの内容を変更する方法

Question

これで、一連の画像が表示されるので、クリックするとその画像のALTテキストでDIVの内容が変更されます。ここでthat-

$(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; 

に変数を設定することを考えました。しかし、私は一緒に2と結婚する方法がわかりません。

EDIT：

<section class="section1"> 
 
    <article> 
 
    <ul> 
 
    <li><img src="plumpudding.gif" id="dalton" alt="Lorem ipsum dolor sit amet"></li> 
 
    \t <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> \t \t 
 
    <div class="article_desc" id="article_desc">Click on the picture for description.</div> 
 
    </article> 
 
</section>

Answer 1

ここで名前を付けると便利です。

$(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 2

代わりの要素のidの

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

Answer 3

クラス名を使用するように....これを試してみてください：ここでは、そのセクションのためのHTMLがありますあなたはクリックされたすべての画像を得ることができます。imgタグは必ずclass='image'である必要があります。テキスト領域id= 'article_desc'のIDを定義して、altの情報を表示します。

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