Javascript Can'；我不知道如何使用类名cboxPhoto获取特定img的src（完整路径）

我不熟悉PHP和JavaScript/jQuery

我希望创建一个在lightbox（colorbox）类型的“窗口”中显示的图像的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>'); 
});

var imgSrc=$（'.cboxPhoto'）.attr（'src'）；
var-twitter=“”；
var=”；
var google=“”；
jQuery（文档）.ready（函数（）{
jQuery（“#cboxContent”）.append(
''+imgSrc+twitter+facebook+google+shop+''；
});

---

cboxPhoto类仅在灯箱激活时显示。不知道这是否重要。你可以在www.jeffreygelt.photography上看到它工作/不工作。只需向下滚动并单击其中一张照片。

这里有几个选项：

问题是

$（'.cboxPhoto'）.attr（'src'）的计时呼叫。。。它在文档准备好让选择器查找节点之前运行

还有一个问题：你在创建

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

最后，如果在页面加载后正在将所讨论的图像动态插入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>'); 

   });
})

$（文档）.ready（函数（）{
$（document.body）.on（'click'，'.cboxPhoto'，function（）{
var imgSrc=$（this.attr（'src'）；
var-twitter=“”；
var=”；
var google=“”；
jQuery（“#cboxContent”）.append(
''+imgSrc+twitter+facebook+google+shop+''；
});
})

您需要在单击事件后编写

attr（）

。在页面加载时写入它将为您提供

未定义的

，因为类元素稍后生成。使用prop而不是attr，因为attr提供静态值，而prop提供动态值。也把它放在document.readyThanks中以获得建议，但它仍然不起作用。我仍然在“未定义”。@vinayakj，我也尝试了你的建议，但也没有效果。除了文档之外，还有其他东西吗。准备好了吗，像onclick之类的东西？由于类为cboxPhoto的图像在打开灯箱之前不存在。好的，我刚刚更新了答案（有几个更改）。。。但是如果页面加载时图像不存在，那么它也不会工作。你有一个链接到你的网站/页面，这是一个问题吗？谢谢你的努力，但这也不起作用。我尝试用您实际单击以启动lightbox的元素替换.cboxPhoto，但也不起作用。我想我会尝试联系Colorbox的开发人员，看看他/她能为我做些什么。再次感谢。听起来不错。。。还有一件事要尝试。。。请参阅最后一段代码。。这将向动态插入的节点附加事件。如果您知道要将图像添加到的父节点，则应使用（'click'，'.cboxPhoto'，function（）{…）上的

$（[selector for parent node]）。但这应该可以工作
$(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>'); 

   });
})