javascript - Get image attribute based on class name -
i have images have data-url
attribute want value of data-url
based on click on element.
my html is
<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>
and js is
$(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) });
in console classname.parent not function
so, .parent()
valid on jquery object , not on string (classname
). following work scenario (not pretty, 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')); });
a cleaner solution group image , play icons, use closest , find want, this example.
Comments
Post a Comment