javascript - Multiple social share buttons with different links -
i have implemented jquery social sharing solution on website of this article. had modify code since have multiple posts on 1 page these buttons. have set 'data-href' attribute buttons container in php, shows correct link every post, script gets attribute of first one, every popup window tries share same post. how should modify code different 'data-href' values?
$(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 first class name of clicked element switch(sharename) //switch 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 useful link : ' + pageurl); break; } }); function openshareurl(openlink){ //parameters 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 link',winoptions); //open popup window share website. return false; } });
the structure of 1 sharing block following:
<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>
it looks need data-href
of parent container of clicked button. try this:
$('.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 first class name of clicked element switch(sharename) //switch different links based on different social name { //etc
Comments
Post a Comment