如何使用一个jQuery函数更改两个单独元素中的文本？

Question

我正在为带有缩略图的图库创建一个jQuery函数.网页顶部有一个div,它会显示更大版本的点击缩略图以及标题和说明.

单击缩略图时,标题会按预期更改,但说明仍为默认值(由HTML定义).

缩略图位于无序列表中,如下所示:

<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>

这是jQuery函数:

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

我该怎么做才能修复我的标记并实现我正在寻找的功能？

Answer 1

你想要的attr功能:

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

它是半工作的原因是它title是一个有效的HTML属性,在DOM元素实例上有一个反射属性,所以this.title给了你那个属性; 但description不是,所以没有反映的description财产.使用attrgo并查找实际属性值.

理想的情况下,使用data-*属性为临时的属性(如你description)没有任何标准定义.