使用 JQuery 对具有唯一 rel 属性的元素执行功能

Question

我试图通过自动检测填充一组链接的“rel”属性的值来提高一些代码的可移植性，以便我可以在页面上创建多个图像灯箱。基本上，现在我正在从数据库中提取有关酒店的数据，对于我发现的每家酒店，我正在创建一个由 JCarousel 组成的简单图像库，并且对于每个 JCarousel，可以单击图像来启动仅包含图像的灯箱从那组。这是我目前用来实现我的目标的代码：

$(document).ready(function(){
    $(".carousel").jcarousel({
        wrap: 'circular',
        visible: 3,
        scroll: 1
    });
    $('a.lightbox[rel=9]').lightBox();
    $('a.lightbox[rel=10]').lightBox();
    $('a.lightbox[rel=11]').lightBox();
    $('a.lightbox[rel=13]').lightBox();
});

当前方法的问题是，如果其他人将酒店添加到数据库中（情况总是如此），图像将出现在轮播中，但不会出现有灯箱效果，除非我手动添加它。如果我计划在多个网站上使用此代码（我确实这么做了），这意味着相当大量的维护工作。

我希望能够做的是检测 a.lightbox 元素的独特“rel”属性，并在 $.each 中循环它们以应用灯箱效果。我只是不知道该怎么做。有什么建议吗？

Answer 1

使用 Object 作为一种关联数组来存储看到的 rel 属性：

var rels = {};  // empty object

$('[rel]').each(function() {     // for every element with a 'rel' attribute
    var r = $(this).attr('rel'); // extract the attribute's value
    rels[r] = 1;                 // store a dummy value in the object
});

rels = Object.keys(rels);        // convert the object to an array of its keys

然后您可以依次将灯箱应用到每个唯一的 rel 值:

$.each(rels, function(index, value) {
    $('.lightbox[rel="' + value + '"]').lightBox();
});

注意：Object.keys 是一个 ES5 函数。有关兼容性功能，请参阅 Mozilla 开发者网络 站点。

Answer 2

你可以试试这个

var $this, rel, rels [9, 10, 11, 13];
$('a.lightbox').each(function(){
   $this = $(this);
   rel = $this.attr("rel");
   if($.inArray(rel , rels) > -1)
     $this.lightBox();
});