javascript - 从选择下拉菜单中触发社交共享弹出窗口

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

使用简单的按钮。单击按钮时，社交共享弹出窗口将打开。这可行！
我为相同的社交共享选项创建了一个下拉菜单。我的目标是，当有人选择其中一个选项时，会打开相同的社交共享弹出窗口。这行不通。

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

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

最佳答案

我从未使用过此插件，但是在下拉列表中您没有得到值，因为您使用了this。为了获取值，您不能使用以下正弦值：

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

希望它是您正在寻找的w。