草庐IT

javascript - 防止 jQuery 选择具有相同类的多个元素

coder 2023-08-09 原文

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

单击顶部播放按钮后的样子(两个暂停按钮都切换，只有顶部按钮应该更改):

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

});

最佳答案 

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是一个通用代码，但在我看来，它可能会帮助您更好地理解如何处理它，并且它应该很容易适应。

有一些UX aspects我假设:

  • 如果只有一个玩家在玩，当用户点击第二个玩家的播放按钮时，第一个玩家会暂停。
  • 如果玩家开始播放，#general_button 也会更改为暂停。当用户单击常规(立即暂停)按钮时，单个播放器暂停。再次点击通用(立即播放)按钮开始播放之前的单个玩家。

关于javascript - 防止 jQuery 选择具有相同类的多个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41324840/

javascriptjQuerypauseplay39htmlcss

有关javascript - 防止 jQuery 选择具有相同类的多个元素的更多相关文章

  1. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  2. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  3. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  4. ruby-on-rails - Rails - 一个 View 中的多个模型 - 2

    我需要从一个View访问多个模型。以前，我的links_controller仅用于提供以不同方式排序的链接资源。现在我想包括一个部分(我假设)显示按分数排序的顶级用户(@users=User.all.sort_by(&:score))我知道我可以将此代码插入每个链接操作并从View访问它，但这似乎不是“ruby方式”，我将需要在不久的将来访问更多模型。这可能会变得很脏，是否有针对这种情况的任何技术？注意事项:我认为我的应用程序正朝着单一格式和动态页面内容的方向发展，本质上是一个典型的网络应用程序。我知道before_filter但考虑到我希望应用程序进入的方向，这似乎很麻烦。最终从任何

  5. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法，但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  6. ruby-on-rails - 在 ruby​​ .gemspec 文件中，如何指定依赖项的多个版本？ - 2

    我正在尝试修改当前依赖于定义为activeresource的gem:s.add_dependency"activeresource","~>3.0"为了让gem与Rails4一起工作，我需要扩展依赖关系以与activeresource的版本3或4一起工作。我不想简单地添加以下内容，因为它可能会在以后引起问题:s.add_dependency"activeresource",">=3.0"有没有办法指定可接受版本的列表？~>3.0还是~>4.0？ 最佳答案 根据thedocumentation,如果你想要3到4之间的所有版本，你可以这

  7. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  8. ruby - 使用多个数组创建计数 - 2

    我正在尝试按0-9和a-z的顺序创建数字和字母列表。我有一组值value_array=['0','1','2','3','4','5','6','7','8','9','a','b'，'光盘'，'e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','','u','v','w','x','y','z']和一个组合列表的数组，按顺序，这些数字可以产生x个字符，比方说三个list_array=[]和一个当前字母和数字组合的数组(在将它插入列表数组之前我会把它变成一个字符串，]current_combo['0','0','0']

  9. ruby-on-rails - before_filter 运行多个方法 - 2

    是否有可能:before_filter:authenticate_user!||:authenticate_admin! 最佳答案 before_filter:do_authenticationdefdo_authenticationauthenticate_user!||authenticate_admin!end 关于ruby-on-rails-before_filter运行多个方法，我们在StackOverflow上找到一个类似的问题： https://

  10. ruby-on-rails - Rails 3.1 中具有相同形式的多个模型？ - 2

    我正在使用Rails3.1并在一个论坛上工作。我有一个名为Topic的模型，每个模型都有许多Post。当用户创建新主题时，他们也应该创建第一个Post。但是，我不确定如何以相同的形式执行此操作。这是我的代码:classTopic:destroyaccepts_nested_attributes_for:postsvalidates_presence_of:titleendclassPost...但这似乎不起作用。有什么想法吗？谢谢! 最佳答案 @Pablo的回答似乎有你需要的一切。但更具体地说...首先改变你View中的这一行对此#

随机推荐