Question

我有这样的结构，我使用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>

我需要每个共享按钮共享数据字段上指示的数据网址。我想出了这个，但结果是即使在控制台上每个都工作正常（我正确地获取所有网址）分配给按钮的URL始终是视频快照元素的最后一个（所有将转到video2网址这个例子）

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

    }); 
});

我正在寻找并且无法实现的是每个共享按钮都有自己的网址。因为我使用了每个功能，所以不确定我做错了什么。

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>无法使用.share-button差别化他们。

<强> HTML

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

});

JS - 为每个{{1}}

添加索引

{{1}}

share-button JS每个按钮的不同URL

1 个答案: