0

I have a structure like this and I'm using Share-Button

<div class="video-snap">
  <div class="video-content">All the content is here</div>
  <div class="share-button" data-url="video1">
</div>
<div class="video-snap">
  <div class="video-content">All the content is here</div>
  <div class="share-button" data-url="video2">
</div>

I need that each share button share the data-url indicated on data field. I came up with this but the result is that even on console the each works good (I get all the urls correctly) The URL assigned to the button is always the last one of the video-snap elements (all would go to video2 url in this example)

$(window).load(function() {
    $('.video-snap').each(function() {
        var url = $('.share-button', this).data('url');
        console.log(url);
        config = {
            networks: {
                facebook:{
                    url: url
                },
                google_plus:{
                    url: url
                },
                twitter:{
                    url: url
                },
                pinterest:{
                    enabled: false
                },
                email:{
                    enabled: false
                }

            }   
        }
        new Share('.share-button', config)

    }); 
});

What I'm looking for and can't achieve is that each share-button has it's own url. Not sure what I'm doing wrong since I'm using the each function.

GillesC
  • 10,647
  • 3
  • 40
  • 55
Jaypee
  • 1,272
  • 5
  • 17
  • 37

1 Answers1

1

Use the .each() index to individualize the .share-button when instantiating a new share, the problem was that both div.video-snap's have share-button with no way to differenciate them.

HTML

<div class="video-snap">
    <div class="video-content">All the content is here</div>
    <div class="share-button share-0" data-url="video1">
</div>
<div class="video-snap">
    <div class="video-content">All the content is here</div>
    <div class="share-button share-1" data-url="video2">
</div>

JS - adds the index to each .share-button

$(document).ready(function(){

    $('.video-snap').each(function(index){
        $(".share-button", this).addClass('share-' + index);
        config = { url: $('.share-button', this).data('url') }
        new Share('.share-' + index, config);
    });

});
Brian Dillingham
  • 9,118
  • 3
  • 28
  • 47
  • Hi Brian, is there any chance that I could add the 1,2 to each with jquery as well? Because I cannot pull out from query like that. Thanks a lot for your answer!!! – Jaypee Aug 20 '14 at 20:06
  • Getting "Uncaught SyntaxError: Unexpected token } " on each closing } Digging into it. – Jaypee Aug 20 '14 at 20:15
  • Thanks again....only thing, if you take off the $(document).ready or $(window).load it won't work on jQuery, maybe you want to add to your answer. Best! – Jaypee Aug 20 '14 at 20:32