Question

我正在开发一个WordPress主题并将Fancybox lightbox plugin构建到我的代码中。这很好，除了一个小问题。

但我会首先向您展示代码，因此更容易解释。

<dl class='gallery-item'>
    <dt class='gallery-icon'>
        <a href='image.jpg' title='something'><img width="150" height="150" src="image.jpg" class="attachment-thumbnail" title="something" /></a>
    </dt>
    <dd class='wp-caption-text gallery-caption'>
        Description, that should be displayed as title...
    </dd>
</dl>

这是WordPress标准库的一个库项目的输出。我想要做的是将dd-tags中的描述附加到灯箱图像标题（在ht emoment上显示a-tag的标题，这是一个字母数字字符串 - 不是非常用户友好）。

为了给灯箱标题分配内容，必须在灯箱的初始化功能中调用以下javascript。（此代码实际上将第一个 .wp-caption-text 元素的内容分配给每个图像标题。）

$(document).ready(function(){
    $("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox({

    beforeLoad: function(){
        var caption = $('.wp-caption-text').html();
        this.title = caption;
        }
    });
});

上面的代码按预期工作，但这意味着只有第一个带有 wp-caption-text 类的元素才会被分配到灯箱和每个图像。但我想只获得已在灯箱中打开的图像的相应 wp-caption-text 。所以我将不得不使用 $（this）之类的东西，然后导航到相应的 wp-caption-text 并将文本分配给标题变量。

我挣扎着最后一点和希望，你可以帮助我。这应该不会太难，但我现在还没有线索。

感谢
卢卡斯

Answer 1

试试这个

var caption =  $(this).parent().parent().find('.wp-caption-text').html();

如果此对应当前锚点

Answer 2

如果标记发生变化，这将是稳定的。如果这不起作用，则意味着this不是我们所期望的那样，我们需要弄清楚它是什么。另请注意，我使用的是.text()而不是.html()。如果您决定在.wp-capition-text内添加一些标记（例如，图标或其他内容），这仍然只是抓取文本。

var caption = $(this.element).closest('.gallery-item').find('.wp-caption-text').text();

导航到jQuery中的DOM元素并分配给变量

2 个答案: