javascript - 无法弄清楚如何使用类名 cboxPhoto 获取特定 img 的 src(完整路径)

Question

我是 PHP 和 JavaScript/jQuery 的新手。

我想创建一个显示在灯箱(颜色框)类型“window”中的图像 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>'); 

   });
})