CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jordan Lewallen
Jordan Lewallen

Reputation: 1851

Prevent jQuery from selecting multiple items with the same class

I have a post feed where a play button can be clicked and the play button will be toggled to a pause button, however, when I click on one of the play buttons, both pause buttons are toggled on (for each post). How do I only allow Javascript to toggle the single play button on the feed when there are multiple classes with the same name on the page.

What it looks like after I click the top play button (both pause buttons are toggled when only the top one should change):

Both pause buttons are toggled

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 (fairly 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();

});

Upvotes: 7

Views: 866

Answers (3)

Alvaro
Alvaro

Reputation: 9672

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 a general code but it might help you understand better how, in my opinion, you could approach it and it should be easy to adapt.

There are some UX aspects that I'm assuming:

  • If a singular player is playing, when the user clicks play button of a second player the first player pauses.
  • If a player starts playing the #general_button changes to pause also. When the user clicks the general (pause now) button the individual player pauses. Clicking again the general (play now) button starts playing the previous singular player.

Upvotes: 1

JackHasaKeyboard
JackHasaKeyboard

Reputation: 1675

Just assign something unique to the element that gets clicked, you can do this by removing any other instances that came before it before assigning it.

Here's the gist of it:

<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/

Upvotes: 0

elicohenator
elicohenator

Reputation: 747

you can use children() method. Read more 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'); 
});

Upvotes: 0

Related Questions