从<p>标记到twitter小部件文本数据属性
Pass data from generated value of <p> tag to twitter widget text-data attribute
我正在尝试将数据从我的p
标记传递到新tweet中的data-text
属性。问题是,标签中显示的数据是从数组中生成的,我的twitter小部件不识别动态值。
这是JS Fiddle
<!-- <div id="DIV1">This is the first quote</div> -->
<p id="DIV1"></p>
<script>
var arr = ["This is first quote",
"This is second quote",
"This is third quote",
"This is fourth quote",
"This is fifth quote"];
function choseRandQuote() {
var randomQuote = Math.floor(Math.random()*(arr.length));
document.getElementById('DIV1').innerHTML = arr[randomQuote];
}
</script>
<div class="button-place"> <!-- /reserved exclusevly for button-->
<button id="btn-gnr" class="btn" onclick="choseRandQuote();">Generate!</button>
</div><!-- /end .button -->
<br />
<br />
<div id="twtbtn"></div>
<!-- and-->
<script>
var MyDiv1 = document.getElementById('DIV1').innerHTML;
window.twttr = (function(d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = {
_e: [],
ready: function(f) {
t._e.push(f)
}
});
}(document, "script", "twitter-wjs"));
twttr.ready(function(twttr) {
twttr.widgets.createShareButton(
'http://twitter.com',
document.getElementById('twtbtn'),
function(el) {
console.log("Button created.")
},
{
count: 'none',
text: "Quote: " + MyDiv1,
via: 'alex_ryzhuk',
hashtags: 'FreeCodeCamp'
}
);
twttr.events.bind('tweet', function(event) {
console.log(event, event.target);
});
});
</script>
您的tweet按钮在dom加载时呈现,因此您的div为空。每次更改报价时,您都需要重新生成推特按钮。
<!-- <div id="DIV1">This is the first quote</div> -->
<p id="DIV1"></p>
<script>
var arr = ["This is first quote",
"This is second quote",
"This is third quote",
"This is fourth quote",
"This is fifth quote"];
function choseRandQuote() {
var randomQuote = Math.floor(Math.random()*(arr.length));
document.getElementById('DIV1').innerHTML = arr[randomQuote];
addTwitter();
}
</script>
<div class="button-place"> <!-- /reserved exclusevly for button-->
<button id="btn-gnr"
class="btn"
onclick="choseRandQuote();">
Generate!
</button>
</div><!-- /end .button -->
<br />
<br />
<div id="twtbtn"></div>
<script>
function addTwitter(){
var MyDiv1 = document.getElementById('DIV1').innerHTML;
window.twttr = (function(d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = {
_e: [],
ready: function(f) {
t._e.push(f)
}
});
}(document, "script", "twitter-wjs"));
twttr.ready(function(twttr) {
twttr.widgets.createShareButton(
'http://twitter.com',
document.getElementById('twtbtn'),
function(el) {
console.log("Button created.")
}, {
count: 'none',
text: "Quote: " + MyDiv1,
via: 'alex_ryzhuk',
hashtags: 'FreeCodeCamp'
}
);
twttr.events.bind('tweet', function(event) {
console.log(event, event.target);
});
});
}
addTwitter();
</script>
$(".btn-tweet").click(function () {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = 'http://twitter.com/share?text=' + $info.quote + " - " + $info.author,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
});
示例
相关文章:
- Twitter嵌入的时间轴小部件
- 我可以't在Divs中获得3个twitter小部件,以便并排排列
- 未解决的Twitter小工具时代之谜
- 用于Reddit的JavaScript Twitter小工具
- 当我们使用twitter小部件时,如何修改html
- 如何在twitter引导程序2.3.2中设置网页的最小宽度
- 带有Javascript的Twitter小部件
- 基于SSL的Twitter搜索小工具
- chucknorris的twitter小部件在IE上正在失去风格
- 试图消除twitter小部件中的回复和转发
- 从<p>标记到twitter小部件文本数据属性
- twitter小部件包装问题
- Twitter小部件在一个未托管的网站上从工作变成了不工作
- Masonry不适用于Twitter小部件
- Twitter Typeahead最小长度=0等效
- 构建一个最小化的twitter分析工具
- CSS覆盖twitter feed小部件
- 带有mootools的Twitter小工具
- jquery获取Twitter小部件的高度
- 在我的主页上显示推特的twitter小部件:twitter.com