Question

我是PHP和JavaScript/jQuery的新手。

我正在尋找創建一個圖像的src的變量顯示在一個燈箱（colorbox）類型「窗口」，以便我可以將該變量傳遞給其他變量，以便能夠通過共享照片社交媒體。下面的代碼我現在不工作：

var imgSrc = $('.cboxPhoto').attr('src'); 
var twitter = "<a rel='nofollow' href='https://twitter.com/intent/tweet?url='+imgSrc+'&text=Check out JG Pet Photography&hashtags=dogs,photos'>&#xf099;</a>"; 
var facebook = "<a rel='nofollow' href='https://www.facebook.com/sharer/sharer.php?u='+imgSrc+'>&#xf230;</a>"; 
var google = "<a rel='nofollow' href='https://plus.google.com/share?url='+imgSrc+'>&#xf0d5;</a>"; 

jQuery(document).ready(function() { 
    jQuery('#cboxContent').append(
    '<div id="cboxSocial" class="icon-soc">' + imgSrc + twitter + facebook + google + shop + '</div><div class="clear"></div>'); 
}); 

類時燈箱被激活cboxPhoto只顯示了。不知道這是否重要。您可以在www.jeffreygelt.photography上看到它正在工作/不工作。向下滾動並點擊其中一張照片。

Answer 1

有幾個的所有主題在這裏：

1. 問題是你$('.cboxPhoto').attr('src');通話的時間......它的運行文檔之前做好準備選擇找到節點。

2. 還有另外一個問題：你是誤用創建twitter，google等

移動的一切，當到您的onReady函數，然後改變單引號到雙引號10，包括你的報價變量，它應該工作：

jQuery(document).ready(function() { 
     var imgSrc = $('.cboxPhoto').attr('src'); 
     var twitter = "<a rel='nofollow' href='https://twitter.com/intent/tweet?url="+imgSrc+"&text=Check out JG Pet Photography&hashtags=dogs,photos'>&#xf099;</a>"; 
     var facebook = "<a rel='nofollow' href='https://www.facebook.com/sharer/sharer.php?u="+imgSrc+">&#xf230;</a>"; 
     var google = "<a rel='nofollow' href='https://plus.google.com/share?url="+imgSrc+">&#xf0d5;</a>"; 
     jQuery('#cboxContent').append(
     '<div id="cboxSocial" class="icon-soc">' + imgSrc + twitter + facebook + google + shop + '</div><div class="clear"></div>'); 
    }); 

如果你想做到這一點時，點擊$('.cboxPhoto').attr('src');然後你需要分配的onclick處理程序：

jQuery(document).ready(function() { 
    $('.cboxPhoto').click(function(){ 
     var imgSrc = $(this).attr('src'); 
     var twitter = "<a rel='nofollow' href='https://twitter.com/intent/tweet?url="+imgSrc+"&text=Check out JG Pet Photography&hashtags=dogs,photos'>&#xf099;</a>"; 
     var facebook = "<a rel='nofollow' href='https://www.facebook.com/sharer/sharer.php?u="+imgSrc+">&#xf230;</a>"; 
     var google = "<a rel='nofollow' href='https://plus.google.com/share?url="+imgSrc+">&#xf0d5;</a>"; 
     jQuery('#cboxContent').append(
     '<div id="cboxSocial" class="icon-soc">' + imgSrc + twitter + facebook + google + shop + '</div><div class="clear"></div>'); 
     }); 
    }); 

最後，如果有問題的圖像被動態插入到頁面加載後的DOM，你可能想要做這樣的事情：

$(document).ready(function(){ 
    $(document.body).on('click', '.cboxPhoto' ,function(){ 
    var imgSrc = $(this).attr('src'); 
      var twitter = "<a rel='nofollow' href='https://twitter.com/intent/tweet?url="+imgSrc+"&text=Check out JG Pet Photography&hashtags=dogs,photos'>&#xf099;</a>"; 
      var facebook = "<a rel='nofollow' href='https://www.facebook.com/sharer/sharer.php?u="+imgSrc+">&#xf230;</a>"; 
      var google = "<a rel='nofollow' href='https://plus.google.com/share?url="+imgSrc+">&#xf0d5;</a>"; 
      jQuery('#cboxContent').append(
      '<div id="cboxSocial" class="icon-soc">' + imgSrc + twitter + facebook + google + shop + '</div><div class="clear"></div>'); 

    }); 
})