使用jQuery将sibling的html设置为元素的标题标记

时间:2012-05-15 18:00:55

标签: jquery fancybox

我正在设置元素的title属性,并使用以下代码触发Fancybox:

var caption = jQuery('.fancybox').siblings('p.wp-caption-text').html();

jQuery('.fancybox').attr({ title:caption, 'data-fancybox-group': 'gallery1'}).fancybox();

当页面上只有一个.fancybox链接时,这很好用,但问题当然是我想使用画廊。

以上将变量设置为页面上的第一个实例,因此所有标题都相同。

我可以这样做吗?:

jQuery('.fancybox').attr({ title:'jQuery(this).siblings('p.wp-caption-text').html();', 'data-fancybox-group': 'gallery1'}).fancybox();

请原谅我缺乏编码技巧,但我希望对于更熟悉jQuery的人来说这是一个简单的问题。

正在进行的页面:http://professorleonidas.com/wordpress/formacao/

2 个答案:

答案 0 :(得分:2)

你可以让它变得更简单:拥有这个HTML ......

<a class="fancybox" data-fancybox-group="gallery1" href="image01.jpg">open image 01</a>
<p>I am the caption for the image 01</p>
<a class="fancybox" data-fancybox-group="gallery1" href="image02.jpg">open image 02</a>
<p>I am the caption for the image 02</p>

...使用此脚本:

jQuery(".fancybox").fancybox({
 beforeShow: function(){
  this.title = $(this.element).next('p').html();
 }
});

答案 1 :(得分:0)

单独申请每个人:

var caption;
$('.fancybox').each(function(i, elem){
    // Grab the caption text
    caption = $(elem).siblings('p.wp-caption-text').html();

    // Set the attributes and initialize fancybox
    $(elem).attr({ title:caption, 'data-fancybox-group': 'gallery1'}).fancybox();
});

您的'data-fancybox-group'属性的要点在您的问题中并不明确,但上述代码会将gallery1作为其值应用于具有类fancybox的所有匹配元素。< / p>

干杯