Prevent jQuery from selecting multiple items with the same class

Question

I have a mail feed where you can press the play button and the play button will switch to the pause button, however, when I press one of the play buttons, both pause buttons switch (for each message) How do I let Javascript switch the single play button to feed if there are several classes with the same name on the page.

What does it look like when I press the top play button (both pause buttons switch when only the top should change):

Here is the HTML:

<div class="media-circle"> <!-- the pause icon is display: none at start --> <i class="icon ion-ios-play"></i><i class="icon ion-pause feed-pause"></i> </div> 

Here is the Javascript:

 jQuery('.media-circle').click(function (e) { e.preventDefault(); jQuery(this).find('i').toggleClass('ion-ios-play'); jQuery('.feed-pause').toggle(); //this controls universal bottom bar play button jQuery('#bottom-play-button-container').find('i').toggleClass('ion-ios-play').toggleClass('ion-pause'); }); 

Here is the JS for the bottom play button (pretty similar) EDIT *

 jQuery('#bottom-play-button-container').click(function (e) { e.preventDefault(); jQuery(this).find('i').toggleClass('ion-ios-play').toggleClass('ion-pause'); jQuery('#play-pause-toggle').find('i').toggleClass('ion-ios-play').toggleClass('ion-pause'); jQuery('.media-circle').find('i').toggleClass('ion-ios-play'); jQuery('.feed-pause').toggle(); }); 

Answer 1

 var $album = $('.album-dark-overlay'), $bottombutton = $('#bottom-play-button-container'), $last_player = null; // This will be the last player playing, we need it to continue the playing after the general player changes manually from play to pause $album.click(function(e) { e.preventDefault(); // Toggle any play class to pause from other elements playing. $album.filter('.pause').not(this).toggleClass('play pause'); //Toggle general button in the same way. if ($(this).hasClass('pause')) { $bottombutton.removeClass('pause').addClass('play'); } else { $bottombutton.removeClass('play').addClass('pause'); } // Toggle the class from pause to play and from play to pause $(this).toggleClass('play pause'); // Update variable to this player $last_player = $(this); }); $bottombutton.click(function(e) { e.preventDefault(); // Check if the #bottombutton has class .pause and pause all playing players if ($bottombutton.hasClass('pause')) { // Toggle the class from pause to play and from play to pause $album.filter('.pause').toggleClass('play pause'); // Check if the $last_player was assigned at least once. } else if ($last_player !== null) { $last_player.toggleClass('play pause'); } $bottombutton.toggleClass('play pause'); }); 

 .album-dark-overlay, #bottom-play-button-container { padding: 10px; cursor: pointer; float: left; } #bottom-play-button-container { background-color: pink; } .play .ion-pause { display: none; } .pause .ion-ios-play { display: none; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="album-dark-overlay play"> <div class="media-circle"> <i class="icon ion-ios-play"></i><i class="icon ion-pause feed-pause"></i> </div> </div> <div class="album-dark-overlay play"> <div class="media-circle"> <i class="icon ion-ios-play"></i><i class="icon ion-pause feed-pause"></i> </div> </div> <div id="bottom-play-button-container" class="play"> <!--<a id="media-toggle-bottom" href="">--> <i class="icon ion-ios-play"></i><i class="icon ion-pause"></i> <!--</a>--> </div> 

---

This JSFiddle is generic code, but it can help you better understand how, in my opinion, you could approach it, and it should be easy to adapt.

There are some aspects of UX that I assume:

• If a single player is played when the user presses the play button of the second player, the first player stops.
• If the player begins to play changes #general_button and pauses. When the user presses the general action button (pause now), the individual player stops. Pressing the general play button again (play now) starts playing the previous special player.

Answer 2

you can use the children() method. More details here: https://api.jquery.com/children/

 jQuery('.media-circle').click(function (e) { e.preventDefault(); jQuery(this).children('i').toggleClass('ion-ios-play'); jQuery(this).children('.feed-pause').toggle(); //this controls universal bottom bar play button jQuery('#bottom-play-button-container').find('i').toggleClass('ion-ios-play').toggleClass('ion-pause'); }); 

Answer 3

Just assign something unique to the element that is clicked, you can do this by deleting any other instances that were in front of it before you assign it.

Here is its essence:

 <div id="container"> <div>asdf</div> <div>hjkl</div> <div>qwer</div> </div> 

 #container { display: flex; } #container div { padding: 10px; } #active { background: red; } 

 $("#container div").click(function(){ $("#container div").removeAttr("id"); $(this).attr("id", "active"); }); 

https://jsfiddle.net/2fgyq1sL/