Как использовать функцию цикла JQuery для целевого множества элементов с разными идентификаторами

0

В настоящее время у меня есть этот код:

$(document).ready(function(){
    // #filtertab-00 replace this with your element id
    $('#filtertab-00 .box-content .es-nav .elastislide-next, #filtertab-00 .box-content     .es-nav .elastislide-prev').click(function() {
    // trigger lazy load
    $("#filtertab-00 img.lazy").each(function(i) {
        $(this).delay(150*i).fadeIn(1000, function() {
            var src = $(this).attr("data-original");
            $(this).attr('src',src);
        });
    });
});

});

и я хочу использовать эту функцию для целевых имен объектов (id), как показано ниже:

filtertab-00
filtertab-10
filtertab-20
filtertab-30
filtertab-40
filtertab-50
filtertab-60
....
filtertab-90

Кто-нибудь знает, как использовать функцию цикла, чтобы заставить ее работать?

я просто хочу это: когда я нажму кнопку pre или next после выбора вкладки (имя варьируется от filtertab-00 до filtertab-90), оно активирует lazyloading для изображений на текущей выбранной вкладке.

любая идея приветствуется!

  • 6
    Можете ли вы дать им всем общий класс CSS, который работает как селектор? Это было бы проще.
  • 0
    "Будет ли это работать?" - ну, чтобы ответить на этот вопрос, я должен был ответить на него. Учитывая, что вы можете сделать это так же легко, вам не нужно спрашивать нас, если что-то работает. Вы можете запустить его и сообщить нам, почему он не работает (сообщение об ошибке, неверные результаты и т. Д.) Или, если он работает, нет необходимости даже задавать вопрос ...
Показать ещё 2 комментария
Теги:
loops
function
variables

2 ответа

1
Лучший ответ

Возможно, вы можете использовать атрибут jQuery-start-with-selector. Затем вы можете просто выбрать все идентификаторы, которые начинаются с filtertab- с помощью jQuery следующим образом:

$('div[id^="filtertab-"]').each( //magic goes here );

Примечание. Этот метод работает медленно, поскольку он должен искать DOM для элементов с идентификаторами, которые соответствуют критериям, но он выполняет эту работу. Я никогда не замечал заметной задержки.

Поделиться
  • 0
    но если я сделаю это, я нажму '>' '<', тогда он активирует все изображения для отложенной загрузки вместо отложенной загрузки изображений на текущей вкладке.
  • 0
    Я нажимаю кнопку «до» или «Далее», когда выбираю вкладку (имя изменяется от filtertab-00 до filtertab-90), она активирует отложенную загрузку изображений на текущей выбранной вкладке.
Показать ещё 6 комментариев
0

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

$('div[id^="filtertab-"]').find("img.lazy").each(function(i) {
  $(this).delay(150*i).fadeIn(1000, function() {
    var src = $(this).attr("data-original");
    $(this).attr('src',src);
  });
});

В дополнение к этому, просмотрите впечатляющий список селекторов jQuery. Они покрывают много земли :)

Поделиться
  • 0
    Извините, там было одно-много закрывающих скобок. Это должно работать сейчас.
  • 0
    Привет, да, консоль сообщает, что нет проблем, но lazyload теперь имеет проблемы. На первой вкладке в карусели (homefilter) я не буду показывать продукты нормально, сейчас мне действительно нечего делать :(
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню