如何使用toggleclass只显示当前的活动项目以及如何获得活动的类名

我已经创建了动态助推卡，其中记录播放器。我是Jquery和CSS/scss的初学者。如何使用toggleclass只显示当前的活动项目以及如何获得活动的类名

我将根据数据库中的数据生成多个助推卡。为了简单起见，我在下面的例子中只写了2张助推卡。我的问题是，如果有另一个玩家点击播放，我该如何停止播放录音播放器（单纯回到专辑 - >不在播放课程）。换句话说，只有1个唱片播放器可以在任何特定的时间播放vinly动画。如果用户点击另一张卡片的播放，当前播放器将停止并使用转换器翻转回专辑封面。代码只有动画部分，而不是真正的玩家。我如何获得当前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-小提琴链接：

Code Link here

来源

2017-10-16 dan joe

有你捣鼓代码的几个问题。这阻止了小提琴正常工作。

答：您链接到不正确的jQuery URL，但URL中仍有:，导致其无法正常加载。将来使用jsFiddle的JavaScript库。你在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)来指定被点击的目标对象。一旦你有一个适当的关系，你的代码的其余部分按预期工作。

来源

2017-10-17 06:13:46 Twisty

如何使用toggleclass只显示当前的活动项目以及如何获得活动的类名

回答

相关问题