具有不同鏈接的多個社交分享按鈕

我在我的網站上實施了一個jQuery社交分享解決方案，其幫助爲this article。我必須修改代碼，因爲我在這些按鈕的一頁上有多個帖子。我在PHP中爲按鈕容器設置了'data-href'屬性，該屬性爲每個帖子顯示正確的鏈接，但腳本只獲取第一個屬性，所以每個彈出窗口都試圖共享相同的帖子。我應該如何修改此代碼以獲得不同的'data-href'值？具有不同鏈接的多個社交分享按鈕

$(document).ready(function(){ 
var pageTitle = document.title; //HTML page title 
var pageUrl  = $('.share-btn-wrp').attr('data-href'); 

$('.share-btn-wrp li').click(function(event){ 
    var shareName = $(this).attr('class').split(' ')[0]; //get the first class name of clicked element 
    switch(shareName) //switch to different links based on different social name 
    { 
     case 'facebook': 
      OpenShareUrl('https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle)); 
      break; 
     case 'twitter': 
      OpenShareUrl('http://twitter.com/home?status=' + encodeURIComponent(pageTitle + ' ' + pageUrl)); 
      break; 
     case 'email': 
      OpenShareUrl('mailto:?subject=' + pageTitle + '&body=Found this useful link for you : ' + pageUrl); 
      break; 
    } 

}); 

function OpenShareUrl(openLink){ 
    //Parameters for the Popup window 
    winWidth = 650; 
    winHeight = 450; 
    winLeft  = ($(window).width() - winWidth)/2, 
    winTop  = ($(window).height() - winHeight)/2, 
    winOptions = 'width=' + winWidth + ',height=' + winHeight + ',top=' + winTop + ',left=' + winLeft; 
    window.open(openLink,'Share This Link',winOptions); //open Popup window to share website. 
    return false; 
} 
});

一個共享數據塊的結構如下：

<ul class="share-btn-wrp" data-href="<?php echo $this->item->link; ?>"> 
    <li class="facebook button-wrap"></li> 
    <li class="twitter button-wrap"></li> 
    <li class="email button-wrap"></li> 
</ul>

來源

2015-06-02 Lilferi

如果我理解的HTML，你需要找到'$的父（本）'，並得到其'數據href' – sideroxylon

父是'.share-BTN-wrp'，但腳本只能得到第一個'data-href'。 – Lilferi

我已將確切的結構添加到問題中。 – Lilferi

它看起來像你需要得到點擊按鈕的父容器的data-href。試試這個：

$('.share-btn-wrp li').click(function(event){ 
    var pageUrl = $(this).closest('.share-btn-wrp').attr('data-href'); 
    var shareName = $(this).attr('class').split(' ')[0]; //get the first class name of clicked element 
    switch(shareName) //switch to different links based on different social name 
    { 
//etc

來源

2015-06-02 22:52:58 sideroxylon

謝謝，它正在這樣工作！ – Lilferi

不客氣。希望一切順利。 – sideroxylon

聽起來像是你可能需要一個循環的地方遞增。

來源

2015-06-02 22:38:25 Jay

具有不同鏈接的多個社交分享按鈕

回答

相關問題