防止jQuery选择具有相同类的多个项目

Question

我有一个帖子提要,可以点击播放按钮,播放按钮将切换到暂停按钮,但是,当我点击其中一个播放按钮时,两个暂停按钮都会打开(对于每个帖子).当页面上有多个具有相同名称的类时,如何仅允许Javascript切换Feed上的单个播放按钮.

单击顶部播放按钮后的样子(当只有顶部按钮发生变化时,两个暂停按钮都会切换):

这是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>

这是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'); 
});

这是底部播放按钮的JS(非常相似)编辑*

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>

这个 JSFiddle是一个通用代码，但在我看来，它可能会帮助您更好地理解如何处理它，并且它应该很容易适应。

我假设有一些用户体验方面的内容：

• 如果单个玩家正在玩，当用户单击第二个玩家的播放按钮时，第一个玩家会暂停。
• 如果玩家开始玩，#general_button 也会更改为暂停。当用户单击常规（立即暂停）按钮时，单个播放器将暂停。再次单击常规（立即播放）按钮开始播放前一个播放器。