从选择下拉菜单触发社交分享弹出

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

从选择下拉菜单触发社交分享弹出

回答

相关问题