Question

I am writing a jQuery function for an image gallery with thumbnails. There is a div at the top of the webpage that will display a larger version of a clicked thumbnail as well as a title and a description.

When the thumbnails are clicked, the title changes as I expect but the description remains the default (defined by HTML).

The thumbnails are in an unordered list like so:

<ul class=thumblist id=thumblist>
<li><a title="thumb1" description="this is the first pic"></a></li>
<li><a title="thumb2" description="this is the second pic"></a></li>
</ul>

Here is the jQuery function:

  $('.thumblist a').click(function() {
    $("#title").text(this.title);
    $("#description").text(this.description);         
  }); 

What can I do to fix my markup and achieve the functionality I am looking for?

Answer 1

You want the attr function:

$('.thumblist a').click(function() {
  var $this = $(this);
  $("#title").text($this.attr("title")); // Or `this.title`, see below
  $("#description").text($this.attr("description"));         
}); 

The reason it sort of half-worked is that title is a valid HTML attribute that has a reflected property on the DOM element instance, so this.title gave you that attribute; but description is not, so there’s no reflected description property. Using attr goes and looks for the actual attribute value.

Ideally, use data-* attributes for ad-hoc attributes (like your description) not defined by any standard.