jquery - 如何使用 toggleclass 仅显示当前事件元素以及如何获取事件类名

标签 jquery css jquery-ui

我已经创建了记录播放器的动态 boostrap 卡。我是 Jquery 和 CSS/scss 的初学者。

我将根据数据库中的数据生成多张助推卡。为了简单起见，我在下面的例子中只写了 2 张助推卡。我的问题是当另一个播放器被点击播放时，我如何停止播放唱片播放器(vinly 翻转回专辑-> 未播放类)。换句话说，在任何给定时间都只允许 1 个唱机播放 vinly 动画。如果用户点击另一张卡片的播放，当前播放器将停止并翻回带有 toggleclass 的专辑封面。代码只有动画部分，没有实际的播放器。我如何获得当前的 toggleclass 名称？

      <div class="container-fluid">
    <div id="content">
      <div class="music-player-container is-not-playing" id="1mpc">
        <div class="card card-inverse" id="1card">
          <div class="card-header" id="1cardHeader">
            <div class="top">
              <i id="1fav" class="favtoggle fa not-liked"></i>
              <i id="1pl" class="fa fa-plus-circle"></i>
            </div>
          </div>
          <div id="1album" class="album">
            <div class="album-art">
              <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/81kZdGYO%2ByL._SL1500_.jpg" alt="Card image cap">
              <div class="card-img-overlay h-100 d-flex flex-column justify-content-center text-center">
                <span class="control-play" id="1control-play" data-ctype="audio/mp3" data-src="http://localhost:49544/Albums/The_Beatles/Greatest_Hits/hey jude.mp3" title="Play"></span>
              </div>
            </div>
            <div class="vinyl" id="1vinyl"></div>
          </div>
          <div class="card-footer">
            <span class="text-ellipsis text-left">hey jude</span>
            <small class=" text-left text-ellipsis text-xs text-muted">Abbey Road</small>
          </div>
        </div>
        <!-2nd one->


        <div class="music-player-container is-not-playing" id="2mpc">
          <div class="card card-inverse" id="2card">
            <div class="card-header" id="2cardHeader">
              <div class="top">
                <i id="2fav" class="favtoggle fa not-liked"></i>
                <i id="2pl" class="fa fa-plus-circle"></i>
              </div>
            </div>
            <div id="2album" class="album">
              <div class="album-art">
                <img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/81kZdGYO%2ByL._SL1500_.jpg" alt="Card image cap">
                <div class="card-img-overlay h-100 d-flex flex-column justify-content-center text-center">
                  <span class="control-play" id="2control-play" data-ctype="audio/mp3" data-src="http://localhost:49544/Albums/The_Beatles/Greatest_Hits/hey jude.mp3" title="Play"></span>
                </div>
              </div>
              <div class="vinyl" id="2vinyl"></div>
            </div>
            <div class="card-footer">
              <span class="text-ellipsis text-left">hey jude</span>
              <small class=" text-left text-ellipsis text-xs text-muted">Abbey Road</small>
            </div>
          </div>

        </div>

      </div>

JavaScript:

var $div = $('#content');
     var playButton = $('.control-play');
     playButton.on('click', function(e) {
       //alert(e.target.id);
       var $musiPlayerContainer = $div.find('#' + e.target.id + 'mpc');
       var $vinyl = $div.find('#' + e.target.id + 'vinyl');

       $(".music-player-container").not($('#' + e.target.id + 'mpc')).toggleClass('is-playing', false);
       $('#' + e.target.id + 'mpc').toggleClass('is-playing', true);
       e.stopPropagation();
     });

CSS

        /* CSS used here will be applied after bootstrap.css */


    /* CSS used here will be applied after bootstrap.css */


    /*@import '../../bourbon/_bourbon.scss';*/


    /*@import "../../bourbon-bitters/_bitters.scss";*/

    @import url(https://fonts.googleapis.com/css?family=Raleway:400,300,500);
    * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      box-sizing: border-box;
    }

    *:before,
    *:after {
      box-sizing: border-box;
    }


    /*@import "compass/css3";*/


    /*@import "../../bourbon-bitters/mixins/_base.scss";*/


    /*@mixin filter($function: none) {
    //   @warn "This old mixin is deprecated!";

    @include _bourbon-deprecate-for-prefixing("filter");
    // <filter-function> [<filter-function]* | none
    @include prefixer(filter, $function, webkit spec);
    }*/

    body {
      background-color: #fff;
      color: #515044;
      font-family: 'Raleway', sans-serif;
    }

    .music-player-container {
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      display: inline-block;
      height: 220px;
      position: relative;
      max-width: 130px;
      margin-left: 70px;
      margin-top: 170px;
    }

    .music-player {
      background-color: #fff;
      height: 120px;
      padding: 40px 200px 40px 40px;
      position: absolute;
      text-align: right;
      width: 125px;
      z-index: 3;
    }

    .player-content-container {
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      top: 50%;
      position: relative;
    }

    .artist-name {
      font-size: 28px;
      font-weight: normal;
      margin: 0 0 0.75em 0;
    }

    .album-title {
      font-weight: 200;
      font-size: 24px;
      margin: 0 0 1.75em 0;
    }

    .song-title {
      font-size: 18px;
      font-weight: 200;
      margin: 0 0 1.5em 0;
    }

    .album {
      box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.65);
      height: 120px;
      /*margin-left: 250px;
      margin-top: 27px;*/
      position: relative;
      width: 125px;
      z-index: 10;
    }

    .album-art {
      background: #fff center no-repeat;
      height: 120px;
      position: relative;
      width: 125px;
      z-index: 10;
    }

    .card-img {
      background: #fff center no-repeat;
      height: 120px;
      position: relative;
      width: 125px;
      z-index: 10;
    }

    .card-img > .card-img-overlay {
      background: #e0eaec center no-repeat;
      z-index: 10;
    }

    .vinyl {
      -webkit-animation: spin 2s linear infinite;
      -moz-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
      -webkit-transition: all 500ms;
      -moz-transition: all 500ms;
      transition: all 500ms;
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/vinyl.png"), url("http://localhost:49544/Albums/The_Beatles/Greatest_Hits/Album_Cover/IMG_Greatest_Hits.jpg");
      background-position: center, center;
      background-size: cover, 40% auto;
      background-repeat: no-repeat;
      border-radius: 100%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
      height: 110px;
      left: 10px;
      position: absolute;
      top: 10px;
      width: 105px;
      z-index: 5;
      will-change: transform, left;
    }

    .is-playing .vinyl {
      left: 52%;
    }

    .is-not-playing .vinyl {}


    /*
    .is-not-playing .vinyl {
    /*
    left: 0%;*/


    /*left: 1%;
    animation: none;
    transition: none;*/


    /* 
    animation:none;
    left: 5%;
    }
    */

    .i-2x {
      text-align: center;
      font-size: 2em;
    }

    [class^="control-"] {
      border-radius: 100%;
      display: inline-block;
      height: 44px;
      margin: 0 3px;
      width: 44px;
    }

    [class^="control-"]:hover {
      cursor: pointer;
    }

    .card-img-overlay > .control-play {
      /*background: transparent url("../../Content/Album/images/icon_play_blue_50.png") (top / content-box) no-repeat;*/
      background: url("https://png.icons8.com/circled-play/androidL/64");
      height: 64px;
      width: 64px;
      margin-left: 20px;
      background-repeat: no-repeat;
    }

    .control-forwards {
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/forwards.ico") center/cover no-repeat;
    }

    .control-back {
      background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/83141/backwards.ico") center/cover no-repeat;
    }

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @-moz-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @-o-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

js-fiddle 链接:

Code Link here

最佳答案

您的 fiddle 代码存在一些问题。这会阻止 fiddle 正常工作。

一个。你链接到一个不正确的 jQuery URL，它仍然有 : 在 url 导致它无法正确加载。将来使用 jsFiddle 中的 JavaScript 库。

B.你在 CSS 之前加载了 JS，这通常没有帮助；没有错。

所以这是一个有效的例子:https://jsfiddle.net/Twisty/h72rxc32/

JavaScript

$(function() {
  var $div = $('#content');
  var playButtons = $('.control-play');
  playButtons.on('click', function(e) {
    var $musiPlayerContainer = $(this).closest(".music-player-container");
    var $vinyl = $musiPlayerContainer.find('.vinyl');
    console.log($musiPlayerContainer, $vinyl);
    $(".music-player-container").not($musiPlayerContainer).toggleClass('is-playing', false);
    $musiPlayerContainer.toggleClass('is-playing', true);
    e.stopPropagation();
  });

  $('[data-toggle="tooltip"]').tooltip()

  $('[data-toggle="popover"]').popover()
});

没有充分的理由不包装整个代码块。使用更好的选择器将使它更容易使用，并且以后更容易理解。

我想您知道，playButtons 是所有选中的按钮。在.on()中，我们可以使用$(this)来指定被点击的目标对象。建立适当的关系后，其余代码将按预期工作。

关于jquery - 如何使用 toggleclass 仅显示当前事件元素以及如何获取事件类名，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46773117/

上一篇：html - 使容器在包裹时收缩以适合子元素

下一篇：css - 将标题和字段放在其他联系表旁边 7

相关文章：

javascript - jquery 根据浏览器宽度改变

css - 如何使应用程序脚本 Web 应用程序显示为实际可用高度的 100%？

ajax - grails 中的 jquery-ui 自动完成

jquery - 使用 jQuery 动态添加 TD

javascript - 网站在 FF 中根本不显示，但在 Chrome 和 IE 中运行良好

javascript - 当总计为 0 时隐藏 <li>

html - 中心容器

html - CSS 选择器问题

jQuery UI 对话框 onClick 事件

javascript - jQuery、jQueryUI(和插件)和 AngularJS - 它们如何组合在一起？

©2024 IT工具网  联系我们