根据类名获取图像属性

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。

Answer 2

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

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

    alert(className);
    alert(frameurl);
});

.video-poster-player {
    
        background-color: red;
    height: 200px;
    width: 200px;
}

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

    <div>

Answer 3

你能在每个街区周围放一个包裹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>

我创建了一个包装HTML的div。这样你就可以在JS中引用它作为父级。

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

JS将点击功能绑定到.video-poster-player。单击它时，它会查找父项，然后返回.youtube-poster。然后它在该元素上查找属性data-url。

View Codepen here