Использование JQuery для выполнения функции с элементами с уникальным атрибутом rel - PullRequest
Новая
       20

Использование JQuery для выполнения функции с элементами с уникальным атрибутом rel

2 голосов
/ 01 августа 2011

Я пытаюсь улучшить переносимость кода, автоматически определяя, какие значения заполняют атрибут 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();
});

Проблема с текущим подходом состоит в том, что если кто-то еще добавит отель в базу данных (что всегда будет так), изображения появятся в карусели, но не будут иметь эффекта лайтбокса, если я не добавлю его вручную. Это означает довольно значительный объем поддержки, если я планирую использовать этот код на нескольких веб-сайтах (что я и делаю).

То, что я хотел бы сделать, это обнаружить уникальные атрибуты rel для элементов a.lightbox и просмотреть их в $ .each, чтобы применить эффект lightbox. Я просто не уверен, как это сделать. Любой совет?

Ответы [ 2 ]

1 голос
/ 01 августа 2011

Используйте 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 Developer Network для получения информации о функции совместимости.

0 голосов
/ 01 августа 2011

Вы можете попробовать это 

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