1

サムネイル付きの画像ギャラリー用の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);         
  });

マークアップを修正し、探している機能を実現するにはどうすればよいですか？

4

1 に答える 1

6

あなたはattr関数が欲しい：

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

それが半ば機能している理由は、DOM要素インスタンスに反映されたプロパティtitleを持つ有効なHTML属性であるため、その属性を提供します。しかしそうではないので、反映されたプロパティはありません。を使用して、実際の属性値を検索します。this.titledescriptiondescriptionattr

理想的には、標準で定義されていないアドホック属性（のような）のdata-*属性を使用します。description

于 2012-12-13T22:52:48.597 に答える