從選擇下拉菜單觸發社交分享彈出

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

來源

2016-12-14 asanas

我從來沒有使用這個插件，但在下拉，因爲你使用的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-14 08:51:25

你對錯誤地使用'this'是錯誤的。我通過使用$（'select [name =「social_share」]：selected'）。ShareLink（）來解決這個問題。然而，觸發器還沒有得到認可，因爲在插件代碼中，我注意到它特別尋找click事件來打開彈出窗口。所以，我改變了上面的選擇器，繞過了插件中的click事件，現在它工作得很好。 – asanas

問題是由做兩件事情解決：

更改 $(this).ShareLink(...) 到 $('select[name="social_share"] :selected').ShareLink()
調整插件繞過click事件有人專門尋找。

來源

2016-12-14 08:59:37 asanas

從選擇下拉菜單觸發社交分享彈出

回答

相關問題