Issue with data-attributes

JavaScript
1

Hi, everyone.

I’m wonder what wrong I’m doing here

After clicking on Play Vimeo Video the image should disappear and Vimeo vide should be displayed - It works if I use the standard classes instead the data attributes, but this part of code is into Laravel loop, so each item should have some kind of unique class, otherwise when you click on one item, you will see reaction on all others.

Any advice ? Thanks :slight_smile:

2

So to select elements by their data attribute (or any attribute) use this format:

$('[attributeName="value"]')

So in your case, you want to be doing:

$('[data-class="' + uniqueClass + '"]').append(videoEmbedCode);
3

Hm this way would display iframe twice.

4

Oh whoops, you’re right. The naming “data-class” is tripping me up - try this:

$('.VideoEmbed[data-class="' + uniqueClass + '"]').append(videoEmbedCode);
1 Like
5

Thanks, this approach did the trick :wink:

6

I’m not sure, but what is the best way to hide exact image.

Maybe create new data attribute, such as data-image-class or maybe use existing data-class but assign different class.

Note: I assign class with Laravel, where I get ID of post from DB, something like this play-{{ $post->id }}

I tried this way, but it doesn’t hide the image

$('.VideoImg[data-class="' + uniqueClass + '"]').hide();

.VideoImg has data-class attribute like this image-{{ $post->id }}

I also tried with defining new data attribute data-image but same issue, video show up, below the image which is not hidden.

7

I tried one more way, and get the answer what make issue, but no idea about solution.

Let’s stick with the data-image additional attribute.

So first I set the markup properly

<img class="VideoImg" src="..." data-image="image-{{ $post->id }}">

If I take look at the markup, every item has different class depending on the ID from database.

In JS, I defined new variable

var imageClass = $('.VideoImg').attr('data-image');

Then I tried to hide image in same way that @OzRamos provided.

$('.VideoImg[data-image="' + imageClass + '"]').fadeOut();

And this works for only one item, so It’s trigger same class for each element - I don’t know why.To be sure, I do console log

console.log('Image class is ' + imageClass);

And then click on few random items, the results are expected - clasess are same :open_mouth:

3360×224 34.9 KB

Help :slight_smile: Thanks :slight_smile:

8

One method would be to wrap each of the image sets in a container, like this:

<div class="video-wrap">
  <figure>
    <img src="http://mediad.publicbroadcasting.net/p/kalw/files/styles/medium/public/201601/Nature-Brain.jpg" alt="" class="VideoImg"/>
    <div class="VideoEmbed" data-embed="https://player.vimeo.com/video/176894130" data-class="Play-1"></div>
  </figure>
  <a href="#" class="PlayVideo" data-class="Play-1">Play Vimeo Video</a>
</div>

This will let you get rid of ID’s altogether because you can just use jQuery’s .closest() and .find() methods to find everything you need. Something like this:

$('.PlayVideo').on( 'click', function(e) {
  	e.preventDefault();
  
    var $wrap = $(this).closest('.video-wrap'),
    	$img = $wrap.find('.VideoImg').first(),
    	$embed = $wrap.find('.VideoEmbed').first(),
    	embedURL = $embed.data('embed'),
    	embedCode = '<iframe src="' + embedURL + '" width="100%" height="280" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';

    $img.hide();
    $embed.append(embedCode)
} );

1 Like
9

Thanks @OzRamos for your help :slight_smile:

I will try to implement this tomorrow, now it’s a bit late here :slight_smile:

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.