Попытка установить атрибут data-mfp-src для magnific-popup с помощью jquery

Question

Я модифицирую тему Wordpress, которая использует увеличенное всплывающее окно.

Я хотел бы заменить URL из тегов привязки пустыми строками и вместо этого заполнить атрибут data-mfp-src URL-адресом. Это сделано для того, чтобы средний щелчок не открывал исходное изображение на новой вкладке и скрывал URL-адрес в строке состояния (я знаю, что он все еще будет виден в исходном коде страницы).

Я пробовал это:

$('.photowall-item a').each(function(idx,link) {
    $(this).attr('data-mfp-src', link);
    $(this).attr('href', '');
});

Я также попытался установить data-mfp-src, используя $(this).attr('href') вместо ссылки.

В любом случае, при загрузке страницы, href заменяется пустой строкой, data-mfp-src создается, но также содержит пустую строку вместо исходного значения href. Если я назначу href другое значение, data-mfp-src получит то же значение. Это ломает всплывающее окно.

Если я назначу жестко закодированное значение для data-mfp-src, например. $(this).attr('data-mfp-src', 'someurl') это работает отлично, но, очевидно, одно и то же изображение появится независимо от того, на какой эскиз вы нажали.

Также странно, если я сделаю alert($(this).attr('data-mfp-src')) сразу после очистки href возвращается правильное значение для data-mfp-src. Но когда я просматриваю сгенерированный источник в своем браузере, значение исчезает.

Answer 1

Функция, в которую вставлен этот код, вызывается дважды пощечиной

data-mfp-src и href устанавливаются правильно с первого раза. Во второй раз пустая строка, которая была назначена для href, затем перезаписывает правильный URL, который был назначен в data-mfp-src.

Я исправил это, определив массив, а затем проверив, пуст ли он. Если он пуст, я заполняю массив ссылками и продолжаю. Если он не пустой, я назначаю ранее назначенные hrefs для data-mfp-src и очищаю hrefs.

Работает как шарм.