Question

我正在使用基于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>

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

希望这是你想要的wat。

Answer 2

通过做两件事来解决问题：

更改 $(this).ShareLink(...) 至 $('select[name="social_share"] :selected').ShareLink()
调整插件以绕过它专门寻找的点击事件。

从选择下拉列表中触发社交共享弹出窗口

2 个答案: