Function called by click affects all elements with one class

Question

I have a page with several images with a play button. When the play button is pressed, I try to swap the src sibling element using the path to the corresponding gif. For some reason, when I click the play button on the first item, it works fine. When I click the game on the second element, it changes src to the second gif, BUT also restarts the first gif. If I press the play button on the third play button, it restarts all 3 gifs from the very beginning.

HTML looks like this:

<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 looks like this:

$(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);
});

img, src , gifs . - , - .

Answer 1

$sibling; $gif, .

$(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

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>

Hide result

next siblings.

, .