循環獲取圖像srcs來填充動態分享div

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/

說明：首先將每個（）循環後您正在使用的社會變量，如市場預期，你只有一個/最後一個值可用。通過這種方式，通過創建數組，並將其中的所有值推入，您可以將它用於新的每個循環（#photos一個循環），並將其「注入」到主體...更改在代碼中註釋。