1

在我的 html 中，我有一个带有大约 25 个缩略图的屏幕，每个缩略图都有一个类似的按钮，格式如下：

<input type="button" class="btn btn-primary btn-small" id="likeBtn" data-id="545206032225604" value="Like">

每个图像的 data-id 都不同。

这个想法是然后使用该 id 向 facebook 图形 API 发出 POST 请求并喜欢该帖子。

我有一个像这样的事件监听器：

$('#likeBtn').click(function () {
    facebook.likePhoto(controller.likeReady);
});

我遇到的问题是我不确定如何从实际单击的元素中获取该数据 ID。

让我知道我是否可以提供更多信息。

谢谢

4

3 回答 3

2

使用.data()

$('#likeBtn').click(function () {
    var data_id = $(this).data('id'); 
    facebook.likePhoto(controller.likeReady);
});

读这个

Id 属性必须是唯一的。改用类。

更改 HTML

使用 classlikeBtn而不是 idlikeBtn正如您所说的那样，您有很多这样的按钮。

<input type="button" class="btn btn-primary btn-small likeBtn" data-id="545206032225604" value="Like">

不，你的js成为

$('.likeBtn').click(function () {
    var data_id = $(this).data('id'); 
    facebook.likePhoto(controller.likeReady);
});

阅读具有相同 id 属性的两个 HTML 元素：它到底有多糟糕？

OP评论后更新

使用.on()

由于元素是动态添加的，因此您不能将事件直接绑定到它们。因此您必须使用事件委托。

$(document).on('click','.likeBtn',function () {
    var data_id = $(this).data('id'); 
    facebook.likePhoto(controller.likeReady);
});

句法

$( elements ).on( events, selector, data, handler );
于 2013-10-27T06:24:25.430 回答
0

尝试这个：

$('#likeBtn').click(function () {
    var dataId = $(this).prop('data-id');
    console.log(dataId); //or do something else

    facebook.likePhoto(controller.likeReady);
});

不过，如果我理解正确，您是否有多个 ID 为 likeBtn 的元素？

于 2013-10-27T06:24:14.670 回答
0 
$('#likeBtn').click(function () {
   var id;

   id = $(this).attr('data-id');
   facebook.likePhoto(controller.likeReady);
});
于 2013-10-27T06:25:00.607 回答