从Select下拉列表中触发社会共享弹出
从Select下拉列表中触发社会共享弹出
提问于 2016-12-14 08:16:17
我使用基于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>回答 2
Stack Overflow用户
发布于 2016-12-14 08:51:25
我从未使用过这个插件，但是在下拉列表中，您没有得到值，因为您使用了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'
});
});希望那是你在找的。
Stack Overflow用户
发布于 2016-12-14 08:59:37
通过做两件事解决了这个问题：
- 将
$(this).ShareLink(...)更改为$('select[name="social_share"] :selected').ShareLink() - 调整插件，以绕过点击事件，它是专门寻找。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41137747
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号