Javascript 基于类名获取图像属性

我有一些具有

数据url

属性的图像，我想根据单击元素获得

数据url

的值

我的html是 在控制台中，它是

className.parent不是函数

因此，

.parent（）

仅对jQuery对象有效，而对字符串无效（

className

）。以下内容适用于您的场景（不太好看，但是）

---

一个更干净的解决方案是将你的图像分组并播放图标，然后使用并获得你想要的，比如。

检查工作示例。如果你需要进一步的信息，请告诉我

$（文档）。在（'单击'，'上。视频海报播放器'，功能（事件）{
var className=$（this.attr（'class'）；
警报（类名）；
var frameurl=$（this.parent（）.find（'.youtube poster'）.data（'url'）；
警报（类名）；
警报（框架URL）；
});
。视频海报播放器{
背景色：红色；
高度：200px；
宽度：200px；
}
您是否能够在每个块周围放置一个环绕div？通过这种方式，您可以针对块内的对象：

<div class="image-wrapper">
    <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>
</div>

JS将单击功能绑定到
.video poster player
。单击它时，它会向上查看父对象，然后向下查找
。youtube海报
。然后在该元素上查找属性
数据url

img
不是父元素尝试
。最近（'img'）
而不是所有这些东西，只是：
var frameurl=$（'.video poster player'）。最近（'img'）。数据（'url'）？className是一个字符串，您不能对其执行“parent（）”，您需要以元素为目标。
$(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)
});

<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>

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

<div class="image-wrapper">
    <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>
</div>

$('.video-poster-player').click(function(){
    var img = $(this).parent().find('.youtube-poster');
    var data_url = $(img).attr('data-url');
    console.log(data_url);
});