javascript - 根据类名获取图像属性

Question

我有一些具有 data-url 属性的图像，我想根据对元素的点击获取 data-url 的值。

我的html是

<img class="youtube-poster" src=" http://i2.ytimg.com/vi/juIJGBxj-4w/maxresdefault.jpg " data-url="https://www.youtube.com/embed/juIJGBxj-4w">
<div class="video-poster-player"><i class="play"></i><div>

我的js是

$(document).on('click', '.video-poster-player', function(event) {
  var className = $(event.target).attr('class');
  var frameurl = className.parent().find('.youtube-poster').data('url')

  console.log(className)
  console.log(frameurl)
});

在控制台中是className.parent is not a function

Answer 1

因此，.parent() 仅对 jQuery 对象有效，对字符串 (className) 无效。以下内容适用于您的场景(不太漂亮，但 works )。

<img class="youtube-poster" src=" http://i2.ytimg.com/vi/juIJGBxj-4w/maxresdefault.jpg " data-url="https://www.youtube.com/embed/juIJGBxj-4w">
<div class="video-poster-player">
    <i class="play">Play</i>
<div>

JS:

$(document).on('click', '.video-poster-player', function(event) {
    alert ($(this).prev('.youtube-poster').data('url'));
});

更简洁的解决方案是将图像分组并播放图标，然后使用 closest和 find得到你想要的，比如this example .