Question

我使用PrettyPhoto灯箱，并试图在另一非jQuery JavaScript库，使该链接主动设置一个链接rel属性（它设置链接类活动的），所以PrettyPhotot灯箱将打开。我不希望链接打开，除非它是活动链接。我成功设置了该属性，但每次点击链接时都会打开每个链接，而不仅仅是活动链接。在FireBug中没有错误。

Prettyphoto的代码设置为这样：

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

的有效和无效点击的其他的JavaScript代码：

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

解决这个如下：

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); 
} 

Answer 2

的问题是，一旦你打电话

$("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(), ''); 
});