Cyrill Cyrill - 4 months ago 12
Javascript Question

selecting only one div among class via .this not working

I have two vimeo videos and a title that fades in when the play button is pressed…
It works perfect for one video, but if I add more with the same class it breaks…
I tried using .this to select only one but somehow it doesn't work…

Here's the fiddle with one video…

https://jsfiddle.net/4h1xfmrk/8/

And here's the fiddle with two videos…

https://jsfiddle.net/4h1xfmrk/15/

this is the query code:

var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('play', function() {
$(".text").fadeIn( "slow" );
});

player.on('pause', function() {
$(".text").fadeOut( "slow" );
});

$( "html" ).click(function() {
$( ".text" ).fadeOut("slow")
});


this the html:



<div class="video" id="item_1">
<iframe src="https://player.vimeo.com/video/155851922?color=ffffff&title=0&byline=0&portrait=0" width="320" height="320" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe></div>
<div class="text">Text_1</div>
<div class="video" id="item_2">
<iframe src="https://player.vimeo.com/video/155851922?color=ffffff&title=0&byline=0&portrait=0" width="320" height="320" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe></div>
<div class="text">Text_2</div>


I want that if the play button from #item_1 is pressed Text_1 is shown
and if #item_2 is pressed Text_2 is shown…

How do I need to write this?

Answer

try this fiddle https://jsfiddle.net/4h1xfmrk/21/

$.each($('.video'), function(index, element){
        var iframe = $(this).find("iframe");
        var player = new Vimeo.Player(iframe);
    player.on('play', function() {
            console.log($(this.element).parent().attr('id'));
        $(this.element).parent().children('.text').fadeIn("slow");
    });

    player.on('pause', function() {
       $(this.element).parent().children('.text').fadeOut("slow");
    });
});

you have to iterate through the video objects and set their click handlers individually