无法弄清楚如何使用类名 cboxPhoto 获取特定 img 的 src（完整路径）

Question

我是 PHP 和 JavaScript/jQuery 的新手。

我正在寻找在灯箱（颜色箱）类型“窗口”中显示的图像的 src 变量，以便我可以将该变量传递给其他变量，以便能够通过社交分享照片媒体。这是我现在无法使用的代码：

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 函数中，然后将单引号更改为双引号十，包括变量，它应该可以工作：

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-handler：

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>'); 

   });
})