单击 twitter 按钮时获取数据属性。答案

【问题标题】：GET data attr when twitter button is clicked.单击 twitter 按钮时获取数据属性。
【发布时间】：2013-10-07 22:39:29
【问题描述】：

点击推文按钮时，我需要访问 data-url="some link"。

使用此代码：

twttr.events.bind('click', function(event) {

var tweeturl = $('.twitter-share-button').data("url");
var count = $('.twitter-share-button').data("count");
console.log(tweeturl, count);
});

但是控制台正在输出“未定义未定义”。谁能告诉我为什么会发生这种情况以及如何解决？

查看完整的JS Fiddle。

非常感谢各位。

【问题讨论】：

标签： jquery twitter

【解决方案1】：

获取 URL 很简单，只需使用这个 HTML：

<div id="foo" data-url="http://ios-blog.co.uk">
    <!-- other html -->
</div>

还有这个事件处理程序：

twttr.events.bind('click', function(event) {
    var link = $(event.target).parent().data('url');
    console.log(link);
});

Twitter 的 javascript 将 .twitter-share-button 链接转换为包含分享按钮 html 的 iframe。这意味着当您尝试在代码中选择它时，您实际上选择的 iframe 没有链接所具有的 data-* 属性。

由于Same-origin policy 的原因，您也无法获取 iframe 的内容并找到计数。

但是，您能够使用 Twitter 的 api 获取推文计数：

$.ajax({
    dataType: "jsonp",
    url: 'http://urls.api.twitter.com/1/urls/count.json?url=http://ios-blog.co.uk',
    success: function (data) {
        console.log(data.count);
    }
});

查看这个工作示例：http://jsfiddle.net/TDgX5/

但是，这不是官方推荐的方法，可能不应该过分依赖。可能有更好的方法来解决您的问题，您使用 count 做什么？

【讨论】：

我只是使用计数来尝试访问那里的所有内容，以防它只是数据 URL 不起作用。

【解决方案2】：

看起来 twitter API 正在更改您的链接并将其放入 IFrame。所以链接更容易访问。我可能需要更好地了解您的问题才能正确回答您的问题。

但是你能把你的数据也存储在 foo 元素中吗？

twttr.events.bind('click', function(event) {
  var tweeturl = $('#foo').data("url");
  var count = $('#foo').data("count");
  console.log(tweeturl, count);
});

例子

http://jsfiddle.net/ZwHBf/87/

【讨论】：