Question

我正在使用PrettyPhoto灯箱，并尝试在链接上设置rel属性，当另一个非jQuery javascript库使该链接处于活动状态时（它将链接类设置为活动状态），以便打开PrettyPhotot灯箱。我不希望链接打开，除非它是一个活动链接。我成功设置了属性，但点击后每个链接都会在灯箱中打开，而不仅仅是活动链接。 FireBug中没有错误。

Prettyphoto的代码设置如下：

$("a[rel^='prettyPhoto']").prettyPhoto();

活动和非活动点击的其他javascripts代码：

ContentFlowConf: {
    onclickActiveItem: function (item) {
        $('.active').attr('rel', 'prettyPhoto[gallery]');
    },
    onclickInactiveItem: function (item) {
    $('.active').removeAttr('rel');
        $('.item').click(function(event) {
            event.preventDefault(); 
        });
    }
}

最初的html是：

 <a class="item" title="Image" href="image.jpg"><img class="content" src="thumb.jpg" alt="Image"/></a>

其他javascript将html设置为：

 <a class="item active" title="Image" href="image.jpg"><img class="content" src="thumb.jpg" alt="Image"/></a>

我当然是新手，不知道是什么让它起作用。我想知道是否需要使用.live函数？

Answer 1

问题是，一旦你打电话

$("a[rel^='prettyPhoto']").prettyPhoto();

这些链接已注册为在prettyPhoto中打开。稍后更改rel属性不会影响prettyPhoto已设置的事件处理程序。

我看了docs for prettyPhoto，看来还有另一种方法可以手动打开图片：

$.prettyPhoto.open('image.jpg','Title','Description');

因此，当用户点击链接时，您可以检查它是否处于活动状态，如果是，请手动打开prettyPhoto。这样的事可能有用:(未经测试）

$('a.item').click(function() {
  var link = $(this);
  if (link.hasClass('active'))
    $.prettyPhoto.open(this.href, link.text(), '');
});

Answer 2

解决了这个问题：

onclickActiveItem : function(){
    initCBox();
},

//lots of code here...

function initCBox(){
    var img1 = $('.item.active').attr('href');
    var label = $('.item.active .content').attr('alt');
    $.prettyPhoto.open(img1, label);
}

动态设置rel属性

2 个答案: