jquery - 如何使用一个 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用于未由任何标准定义的临时属性（如您的）。