如何获取img的ID，然后使用它来更改DIV的内容

Question

Ok, so I have a series of images that when clicked on will change the contents of a DIV with that image's ALT text. Here is the code for 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);
  });

});

And I have this working just fine, but the issue is, if I have several images within the page, how can I optimize the code so I don't have to repeat it for each image?

I thought about setting a variable to the image ID-

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

But I don't know how to marry the two together.

EDIT: Here is the HTML for that section:

 <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

Try this....So that you can get all clicked image alt information.Note that all img tags must have class='image' and define the id for text area id= 'article_desc' where you want to display alt information.

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

Answer 2

Making a named function could be helpful here.

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

By having a named function you just need to reference it instead of copying the inline anonymous function every time. From there you can decide to do a click event for each element id you need or you could assign a class to each element to be affected and use that instead.

Answer 3

Instead of id's of elements use class name

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