我想通過一個錨標記的ID到jquery，但它不工作

Question

我正在使用花式框，我試圖打開一個鏈接，其彈出圖像。

我打開的的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> 

當您單擊圖像

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

激活的fancybox jQuery的HTML這是分開的一些代碼，我現在得到我修改它爲自己。不知道wehat「lightBox」是。

當我改變了HREF來

href: this.href, 

或者

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

它的工作原理

但

href: this.id, 

不行！我怎樣才能使它的ID爲HREF的東西？

我的console.log爲（$這個）

http://imgur.com/GIPJiLB

Answer 1

你試過$(this).attr('id');？

無論如何，我認爲是在數據-ID和使用$(this).attr('data-id');更好更改屬性ID。

Answer 2

有多個錨標記等都可能是你需要用每個錨標籤

Answer 3

相反的id屬性讓你的價值，給它的定位標記的rel屬性，然後檢查$（本）.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" 
       })); 
      } 
     }); 
     }); 

});