Javascript 根据类ID分配Fancybox标题

考虑以下标记：

<dl class="target">
<dt class="gallery-icon">
<a class="fancybox" rel="gallery1" href="1_b.jpg"><img src="1_s.jpg" alt="hello"/>
</a>
</dt>
<dd class="wp-description-2" style='display:none'>Image Caption #1</dd>

<dt class="gallery-icon">
<a class="fancybox" rel="gallery1" href="2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="hello"/>
</a>
</dt>
<dd class="wp-description-3" style='display:none'>Image Caption #2</dd>
</dl>

JSIDLE链接：

---

谢谢你

你好，我编辑了你的小提琴，希望这能帮助你：

您应该替换：

 afterShow: function() {
    $(".fancybox-title").wrapInner('<div />').show();

    $(".fancybox-wrap").hover(function() {
        $(".fancybox-title").show();
    }, function() {
        $(".fancybox-title").hide();
    });
},

另一把小提琴的最终结果是：

---

只是好奇：为什么

Caption#1

有class

wp-description-2

？你是对的，不需要它。这只是我实现的东西，希望它能帮助我得到我想要的，但是根据Ilyas给我的代码，没有必要。非常感谢Ilyas，非常感谢！如果我可以滥用：）现在我试图在同一个fancybox标题中有两个不同的描述：请看。我尝试了一些数组，但我不知道如何正确格式化它。非常感谢。

beforeLoad: function() {

     var num_id = this.element.parents('dt').next('dd').text();
     this.title = num_id;
},

 afterShow: function() {
    $(".fancybox-title").wrapInner('<div />').show();

    $(".fancybox-wrap").hover(function() {
        $(".fancybox-title").show();
    }, function() {
        $(".fancybox-title").hide();
    });
},

 .fancybox-title{
    display:none;
 }
 .fancybox-wrap:hover .fancybox-title{
    display:block;
 }