1. ホーム
  2. 質問と答え
  3. toggleclassを使って現在アクティブなアイテムのみを表示する方法とアクティブなクラス名を取得する方法

toggleclassを使って現在アクティブなアイテムのみを表示する方法とアクティブなクラス名を取得する方法

2017-10-16 11 views
0

レコードプレーヤーの動的ブーストカードを作成しました。私はJqueryとCSS/scssの初心者です。toggleclassを使って現在アクティブなアイテムのみを表示する方法とアクティブなクラス名を取得する方法

私はDBのデータに応じて複数のブーストカードを生成しています。わかりやすくするために、以下の例では2つのブーストカードしか書いていません。私の質問は、別の人がクリックして再生しているときに、プレイレコードプレーヤーを停止させて（アルバム - >ノンプレイクラスに戻す方法）言い換えれば、1人のレコードプレーヤーのみが、息をのむようなアニメーションでいつでも再生することができます。ユーザーが別のカードの再生をクリックすると、現在のプレーヤーは停止し、トグルクラスを使用してアルバムカバーに戻ります。コードには実際のプレーヤーではなく、アニメーションの部分だけがあります。どのように私は現在のトグルクラス名を取得するのですか？

 <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

答えて

0

あなたのフィドルコードといくつかの問題がありました。これは、フィドルが正しく機能しないようにしていました。

A.不適切な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)を使用して、クリックされたターゲットオブジェクトを指定できます。適切な関係を築くと、残りのコードは期待どおりに動作しました。

出典

2017-10-17 06:13:46 Twisty

関連する問題

 関連する問題