クリックで変更するクラス

Question

私はちょうどプロジェクトに取り組んでいます。今はちょっとした助けが必要です。

When the user enters the site they are gonna see this image

そして

on mouse over this is gonna show

ユーザーは、音楽が、今では正常に動作しなければならない再生ボタンをクリックします。しかし、それは再生ボタンの代わりに一時停止ボタンに変わるべきであり、また、画像は第2の画像と一時停止ボタンと一緒に留まるべきである。

<div class="pos-rlt"> 
 
    <div class="bottom"> <span class="badge bg-info m-l-sm m-b-sm">04:08</span> 
 
    </div> 
 
    <div class="item-overlay opacity r r-2x bg-black"> 
 
    <div class="text-info padder m-t-sm text-sm"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o text-muted"></i> 
 
    </div> 
 
    <div class="center text-center m-t-n"> <a href="#"><i data-jp-src="songs/18.mp3" class="icon-control-play i-2x"></i></a> 
 
    </div> 
 
    <div class="bottom padder m-b-sm"> 
 
     <a href="#" class="pull-right"> <i class="fa fa-heart-o"></i> 
 
     </a> 
 
     <a href="#"> <i class="fa fa-plus-circle"></i> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <a href="#"> 
 
    <img src="images/p1.jpg" alt="" class="r r-2x img-full"> 
 
    </a> 
 
</div>

第1の画像のクラスがある：

item-overlay opacity r r-2x bg-black 

及び第2の画像：

item-overlay opacity r r-2x bg-black active 

と再生ボタンのクラスは

あります

class="icon-control-play i-2x 

と一時停止ボタンの私が欲しいもの

icon-control-pause i-2x text-active 

で、ユーザーが再生ボタン class="icon-control-play i-2xをクリックしたときです。再生クラスのボタンをicon-control-pause i-2x text-activeに変更し、画像のクラスitem-overlay opacity r r-2x bg-blackもitem-overlay opacity r r-2x bg-black activeに変更する必要があります。そして、ユーザーがそれを再びクリックすると、それは元に戻す必要があります。あなたはtoggleClassを持つクラスを切り替えることができますよろしく

ナイ

Answer 1

で

。

$(".icon-control-play i-2x").click(function() { 
    $(this).toggleClass('.icon-control-pause i-2x text-active').toggleClass('.icon-control-play i-2x'); 
)};