0

jquery ベースのスクリプト SocialShare.js を使用して、ソーシャル共有をページに追加しています。以下のコードでは、それをトリガーする 2 つの方法が示されています。

  1. シンプルなボタン付き。ボタンをクリックすると、ソーシャル共有ポップアップが開きます。これはうまくいきます！

  2. 同じソーシャル共有オプションのドロップダウンを作成しました。私の目的は、誰かがオプションの 1 つを選択すると、同じソーシャル共有ポップアップが開かれることです。これはうまくいきません。

私は以下のコードを提供しました：

<!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。値を取得するために、次の構文は使用できません。

<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

この問題は、次の 2 つのことを行うことで解決されました。

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

  2. プラグインを微調整して、特に探していたクリック イベントをバイパスします。

于 2016-12-14T08:59:37.903 に答える