Я пытаюсь передать идентификатор тега привязки в jquery, но он не работает

Question

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

Мой HTML, который открывает FancyBox изображение

<div id="isotope"> 
     <a href="img/portfolio/digitallifeWebsite.png" class="item branding webdesign" data-fancy="gal" id="http://www.digitallife.space/"><img src="img/portfolio/digitallifeWebsite.png" alt="digital life website"></a> 
     <a href="img/portfolio/redandwhite.png" class="item branding webdesign" data-fancy="gal" id="http://www.redandwhiteinsight.com/"><img src="img/portfolio/redandwhite.png" alt="Red and white insight"></a> 
</div> 

JQuery, который активирует FancyBox при нажатии на изображение

lightBox: function() { 
    $('#isotope a').fancybox({ 
    onComplete: function() { 
     $("#fancybox-img").wrap($("<a />", { 
      // set anchor attributes 
      href: this.id, // THIS DOESN'T WORK 
      target: "_blank" 
     })); 
    } 
}); 
}, 

Это помимо некоторого кода, который я получил сейчас я модифицируя его для себя , Не уверен, что это «lightBox».

Когда я изменить HREF для

href: this.href, 

Или

href: 'http://www.google.com/' 

Он работает

но

href: this.id, 

Не работает! Как я могу использовать идентификатор для href?

Мой console.log для ($ это)

http://imgur.com/GIPJiLB

Answer 1

Вы пробовали $(this).attr('id');?

Во всяком случае, я думаю, что лучше изменить атрибут идентификатора в данных идентификатора и использовании $(this).attr('data-id');.

Answer 2

есть множественный якорь тег поэтому может быть вам нужно обернуть каждый якорь тег

Answer 3

Вместо того чтобы дать ваше значение в атрибуте ид, дать ему в атрибуте отн якорный тег, а затем проверить $ (это) .attr ('отн');

Answer 4

Вопрос возникает потому, что this имеет другой контекст, а не якорь.

Где находится обработчик для события click (на изображении)? Вы дали очень мало информации о своей задаче.

Во всяком случае, осуществить то, что вы хотите, вы можете сделать, как это (это всего лишь простой пример, я не знаю, что делает ваш код выглядеть):

$('img').on('click', function() { 
    // "this" equal to the element on which you clicked 
    var href = $(this).closest('a') // find anchor 
        .attr('id'); // get attribute id 
}); 

И пройти «HREF» (вы можете сделать его глобальным переменным, если необходимо)

// ... 
onComplete: function() { 
    $("#fancybox-img").wrap($("<a />", { 
    href: href, 
    target: "_blank" 
    })); 
} 
// ... 

Answer 5

Поэтому я исправил это с помощью этого кода.

$(document).ready(function() { 

    $('#isotope a').each(function(i) { 
     var id = $(this).attr('id'); 
     $(this).fancybox({ 
      onComplete: function() { 

       $("#fancybox-img").wrap($("<a />", { 
        // set anchor attributes 
        href: id, //or your target link 
        target: "_blank" 
       })); 
      } 
     }); 
     }); 

});