共享按钮JS每个按钮的不同URL

Question

我有这样一个结构，我使用的是分享-按钮

<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>

我需要每个共享按钮共享数据-url指示的数据字段。我想出了这个结果，但结果是，即使在控制台上，每个操作都很好(我正确地获得了所有的URL )，分配给按钮的url始终是视频快照元素中的最后一个(在本例中，所有这些都会转到video2 url)。

$(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)

    }); 
});

我正在寻找但无法实现的是，每个共享按钮都有自己的url。不知道我做错了什么，因为我使用了每个函数。

Answer 1

当实例化一个新的共享时，使用.each()索引来个性化.share-button，问题是两个div.video-snap的share-button都没有办法区分它们。

<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 -将索引添加到每个.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);
    });

});