Function called on click is affecting all elements with same class

Question

I have a page displaying a few images with a play button. When the play button is clicked, I'm trying to swap out a sibling element's src with the path to the corresponding gif. For some reason, when I click the play button on the first element, it works fine. When I click play on the second element, it swaps out the src on the second gif, BUT also restarts the first gif. If I click play on the third play button, it restarts all 3 gifs from the beginning.

HTML looks like so:

<div class="player">
    <div class="player--image">
        <img class="gif--control gif--play" src="/img/play-button.png" />
        <img class="player--gif" src="/assets/player-image.png" data-gif="/assets/player-gif.gif"/>
    </div>
    <div class="player--info">
        <div class="player--name">
            <h3 class="title">#23</h3>
            <h3 class="title title__large">Player Name</h3>
            <h3 class="title">Center</h3>
        </div>
        <div class="excerpt">
                Lorem ipsum
        </div>
    </div>
</div>
<div class="player">
    <div class="player--image">
        <img class="gif--control gif--play" src="/img/play-button.png" />
        <img class="player--gif" src="/assets/player-2-image.png" data-gif="/assets/player-2-gif.gif"/>
    </div>
    <div class="player--info">
        <div class="player--name">
            <h3 class="title">#45</h3>
            <h3 class="title title__large">Player Name</h3>
            <h3 class="title">Center</h3>
        </div>
        <div class="excerpt">
                Lorem ipsum
        </div>
    </div>
</div>

Javascript/jQuery is as follows:

$(document).on('click tap', '.gif--control', function(){
    var $this = $(this);
    var $gif = $this.siblings('.player--gif');
    var src = $gif.attr('data-gif');

    $gif.attr('src', src);
});

I've tried adding unique IDs to the img element that is having the src swapped, but still, all the gifs would restart when a new play button was clicked. Any help would be appreciated -- feel like I'm missing something super simple.

Answer 1

You're using an unreferenced $sibling call; I replaced it with $gif and your code seems to run fine.

$(document).on('click tap', '.gif--control', function(){
    var $this = $(this);
    var $gif = $this.siblings('.player--gif');
    var src = $gif.attr('data-gif');

    $gif.attr('src', src);
});

https://jsfiddle.net/7jktzLw5/

Answer 2

Here you go with one more solution https://jsfiddle.net/7jktzLw5/2/

 $(document).on('click tap', 'img.gif--control', function(){ var $this = $(this); var $gif = $this.next('img.player--gif'); $gif.attr('src', $gif.attr('data-gif')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="player"> <div class="player--image"> <img class="gif--control gif--play" src="https://image.flaticon.com/icons/png/128/70/70776.png" /> <img class="player--gif" src="https://image.flaticon.com/icons/png/128/42/42829.png" data-gif="https://image.flaticon.com/icons/png/128/44/44382.png"/> </div> <div class="player--info"> <div class="player--name"> <h3 class="title">#23</h3> <h3 class="title title__large">Player Name</h3> <h3 class="title">Center</h3> </div> <div class="excerpt"> Lorem ipsum </div> </div> </div> <div class="player"> <div class="player--image"> <img class="gif--control gif--play" src="https://image.flaticon.com/icons/png/128/70/70776.png" /> <img class="player--gif" src="https://image.flaticon.com/icons/png/128/136/136369.png" data-gif="https://image.flaticon.com/icons/png/128/236/236540.png"/> </div> <div class="player--info"> <div class="player--name"> <h3 class="title">#45</h3> <h3 class="title title__large">Player Name</h3> <h3 class="title">Center</h3> </div> <div class="excerpt"> Lorem ipsum </div> </div> </div> 

I've used next instead of siblings .

Hope this will help you.