jqueryeachshare-button

share-button JS Different URL for each button


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.


Solution

  • 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);
        });
    
    });