如何使用toggleclass显示当前活动项以及如何获取活动类名

Question

我创造了动态的增强卡，它是一个唱机。我是Jquery和CSS / scss的初学者。

我将根据数据库中的数据生成多个boostrap卡。为简单起见，我在下面的示例中仅编写了2张增强卡。我的问题是当另一个人点击播放时，我如何停止播放唱片播放器（vinly转回专辑 - ＆gt; is-not-playing class）。换句话说，只允许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 link：

Code Link here

Answer 1

您的小提琴代码存在一些问题。这阻止了小提琴正常工作。

一个。您链接到一个不正确的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)来指定单击的目标对象。一旦你有了正确的关系，你的其余代码就会按预期工作。