Question

我有一个带有click事件的Jquery on（）处理程序。在函数中，我得到选择器的 a 标记中的数据属性，如下所示：

$(document.body).on('click', '.video-thumbnail a' ,function(){
  var videoID =  $(this).attr('data-video-id');
  //more data atts etc.
});

我的HTML就像这样:(次〜* 20）

<div class="block">
    <div class="video-thumbnail">
      <a data-video-id="123"><img></a>
    </div>
    <div class="video-title">
      <a>title</a>
    </div>
    <div class="video-watch">
      <a>Watch</a>
    </div>
</div>

我想要实现的是div“.block”中的每个锚具有相同的单击事件处理程序，但我仍然可以使用来自第一个锚点的data-attr（使用this或其他）。

所以：无论用户在该div中点击什么锚;它们都使用相同的data-attr执行相同的jquery函数。

这样做的最佳方式是什么？

谢谢你们。

Answer 1

因此，如果我理解正确，您希望将事件处理程序附加到所有锚点，但始终从.video-thumbnail <div>获取属性。你最好使用.closest()：

$(document.body).on('click', '.block div a' ,function(){
    var videoID = $(this).closest('.block').find('.video-thumbnail a').attr('data-video-id');
})

请注意代码中的其他错误：

您需要在jQuery结尾处使用右括号
您需要关闭class元素的.video-thumbnail属性。

正如76484已经提到的那样，让每个块保持data-video-id属性在语义上更有意义，因为这是每个视频的最上层语境。

使用数据属性在一个函数中Jquery多个选择器

1 个答案: