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

Question

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

单击顶部播放按钮后的样子（当只有顶部按钮发生变化时，两个暂停按钮都会切换）：

这是HTML：

var userInfoUrl = "https://www.googleapis.com/oauth2/v2/userinfo?alt=json";
var hc = new HttpClient();
hc.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", accessToken);
var response = hc.GetAsync(userInfoUrl).Result;
var userInfo = response.Content.ReadAsStringAsync().Result;            
dynamic data = JObject.Parse(userInfo);

这是Javascript：

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

这是底部播放按钮的JS（非常相似）EDIT *

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

Answer 1

＆＃13;

＆＃13;

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');

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

This JSFiddle是一般代码，但它可以帮助您更好地了解我认为您可以接近它并且应该很容易适应。

我假设有一些UX aspects：

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

Answer 2

您可以使用children()方法。在此处阅读更多内容：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

只需为被点击的元素指定一些独特的内容，您可以通过在分配之前删除之前的任何其他实例来执行此操作。

以下是它的要点：

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