0

我正在使用基于 jquery 的脚本 SocialShare.js 将社交共享添加到页面。在下面的代码中，您将看到两种触发方式：

  1. 用简单的按钮。单击该按钮时，将打开社交共享弹出窗口。这行得通！

  2. 我为相同的社交分享选项创建了一个下拉列表。我的目标是，当有人选择其中一个选项时，会打开相同的社交共享弹出窗口。这行不通。

我在下面提供了我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="http://learnkraft.com/SocialShare.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $('.share').ShareLink({
                    title: 'SocialShare jQuery plugin',
                    text: 'SocialShare jQuery plugin for create share buttons and counters',
                    image: 'http://cdn.myanimelist.net/images/characters/3/27890.jpg',
                    url: 'https://github.com/AyumuKasuga/SocialShare'
                });
                $(".social_sharing").change(function() {
                  console.log('On change triggered');
                   $(this).ShareLink({
                       title: 'SocialShare jQuery plugin',
                       text: 'SocialShare jQuery plugin for create share buttons and counters',
                       image: 'http://cdn.myanimelist.net/images/characters/3/27890.jpg',
                       url: 'https://github.com/AyumuKasuga/SocialShare'
                   });
                });
            });
        </script>
    </head>
    <body>
    <div class="row">
        <button class='btn btn-primary share s_twitter'>Twitter</button>
        <button class='btn btn-primary share s_facebook'>Facebook</button>
        <button class='btn btn-primary share s_pinterest'>Pinterest</button>
        <button class='btn btn-primary share s_gmail'>Share via email</button>
    </div>
    <div class="row">
      <select name="social_share" class="social_sharing">
        <option value='1' >Share This story</option>
                <option value='1' class="share s_twitter" >Twitter</option>
                <option value='2' class="share s_facebook" >Facebook</option>
                <option value='3' class="share s_pinterest" >Pinterest</option>
            </select>
    </div>
    </body>
</html>
4

2 回答 2

1

我从来没有使用过这个插件，但是在下拉列表中你没有得到值，因为你使用了this. 为了得到值，你不能使用这个sintax：

<div class="row">
  <select name="social_share" class="social_sharing" id="dropdownShare">
    <option value='1' selected="selected" disabled>Share This story</option>
            <option value='1' class="share s_twitter" >Twitter</option>
            <option value='2' class="share s_facebook" >Facebook</option>
            <option value='3' class="share s_pinterest" >Pinterest</option>
        </select>
</div>

和

$(".social_sharing").change(function() {
              console.log('On change triggered');

              //Use this to get the option value
              var e = document.getElementById("dropdownShare");
              var selected = e.options[e.selectedIndex].value;

               $(selected).ShareLink({
                   title: 'SocialShare jQuery plugin',
                   text: 'SocialShare jQuery plugin for create share buttons and counters',
                   image: 'http://cdn.myanimelist.net/images/characters/3/27890.jpg',
                   url: 'https://github.com/AyumuKasuga/SocialShare'
               });
            });

希望这是你要找的。

于 2016-12-14T08:51:25.350 回答
0

通过做两件事解决了这个问题：

  1. 更改 $(this).ShareLink(...) 为 $('select[name="social_share"] :selected').ShareLink()

  2. 调整插件以绕过它专门寻找的点击事件。

于 2016-12-14T08:59:37.903 回答