Question

我正试图在页面上的每个图像之后为社交媒体共享链接“注入”（可能是错误的单词）代码。我有“注射”部分工作，但我的所有图像源变量只是最后一个图像。

我的目标是让jQuery创建一个带有社交媒体共享链接的div，这些链接在代码中的链接之前引用图像。（当你看到代码时，它会更有意义。）

HTML代码：

<section id="photos">
    <a href="/alt/img/portfolio/andy-600x900.jpg" data-lightbox="lightbox">
        <img class="img-responsive" itemprop="image" src="/alt/img/portfolio/andy-395x593.jpg" alt="Andy's Portrait" />
    </a>    

    <a href="/alt/img/portfolio/asbury-park-1500x1000.jpg" data-lightbox="lightbox"> 
        <img class="img-responsive" itemprop="image" src="/alt/img/portfolio/asbury-park-400x267.jpg" alt="Asbury Park" />
    </a>

    <a href="/alt/img/portfolio/dice-600x900.jpg" data-lightbox="lightbox">
        <img class="img-responsive" itemprop="image" src="/alt/img/portfolio/dice-395x592.jpg" alt="Dice product shot" />
    </a>
</section>

JQUERY代码：

$(document).ready(function () {
  if ($(window).width() < 736) {

        $('.img-responsive').each(function() {
            imgSrc = $(this).attr('src');

        var twitter="<a rel='external nofollow' class='social twitter' href='https://twitter.com/intent/tweet?url=http://www.example.com"+imgSrc+"&text=Check out this photo from Example Photography&hashtags=photos' onclick=\"javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;\"></a>";
        var facebook="<a rel='external nofollow' class='social facebook' href='https://www.facebook.com/sharer/sharer.php?u=http://www.example.com"+imgSrc+"' onclick=\"javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;\"></a>";
        var google="<a rel='external nofollow' class='social gPlus' href='https://plus.google.com/share?url=http://www.example.com"+imgSrc+"' onclick=\"javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;\"></a>";
        var pinterest="<a rel='external nofollow' class='social pinterest' href='http://pinterest.com/pin/create/button/?url=https://www.example.com"+imgSrc+"&description=' onclick=\"javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;\"></a>"; 
        social = "<div class='socialContainer'>"+twitter+facebook+google+pinterest+"</div>";
        });
        $('#photos a').each(function () {
            $(this).after(social);
        });

    }
});

这是一个工作演示（嗯，真的是一个不起作用的演示），https://jsfiddle.net/w0tknfb6/，包含所有相关的CSS和东西。

非常感谢任何帮助。感谢。

Answer 1

您只需要做一些小改动：

$(document).ready(function () {
  if ($(window).width() < 736) {
social=[]; //create array
        $('.img-responsive').each(function() {
            imgSrc = $(this).attr('src');

        var twitter="<a rel='external nofollow' class='social twitter' href='https://twitter.com/intent/tweet?url=http://www.example.com"+imgSrc+"&text=Check out this photo from Example Photography&hashtags=photos' onclick=\"javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;\"></a>";
        var facebook="<a rel='external nofollow' class='social facebook' href='https://www.facebook.com/sharer/sharer.php?u=http://www.example.com"+imgSrc+"' onclick=\"javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;\"></a>";
        var google="<a rel='external nofollow' class='social gPlus' href='https://plus.google.com/share?url=http://www.example.com"+imgSrc+"' onclick=\"javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;\"></a>";
        var pinterest="<a rel='external nofollow' class='social pinterest' href='http://pinterest.com/pin/create/button/?url=https://www.example.com"+imgSrc+"&description=' onclick=\"javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;\"></a>"; 
        social.push("<div class='socialContainer'>"+twitter+facebook+google+pinterest+"</div>"); //push values

        });
          $('#photos a').each(function (i) {
            $(this).after(social[i]); //add values 
        });
        // NOT WORKING
        $('#photos a').on('click', function(e){
           e.preventDefault();
           $(this).find('.socialContainer').toggle();
        });
    }
});

演示：https://jsfiddle.net/w0tknfb6/10/

说明：在第一个each（）循环之后，您正在使用社交变量，并且，正如预期的那样，您只有一个/最后一个值可用。这样，通过创建数组并推送其中的所有值，您可以将它用于新的每个循环（#photos一个循环），并且“注入”＃39;它对身体...代码中的更改。

循环以获取图像srcs以填充动态共享div

1 个答案: