具有不同链接的多个社交分享按钮

Posted 2023-02-24

【中文标题】具有不同链接的多个社交分享按钮

【英文标题】：Multiple social share buttons with different links

【发布时间】：2015-06-02 22:25:00

【问题描述】：

在this article 的帮助下，我在我的网站上实现了一个 jQuery 社交共享解决方案。我不得不修改代码，因为我在一个页面上有多个带有这些按钮的帖子。我在 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) + '&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>

【问题讨论】：

如果我理解 HTML，你需要找到$(this) 的父级并获取它的data-href

父级是.share-btn-wrp，但脚本只获取第一个data-href。

我已将确切的结构添加到问题中。

【参考方案1】：

看起来您需要获取单击按钮的父容器的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

【参考方案2】：

听起来你可能需要一个循环来增加。