javascript - 点击更改类别

我只是在做一个项目，现在需要一点帮助。

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



和

on mouse over this is gonna show



当用户单击播放按钮时，音乐现在应该可以正常播放了。但是它应该更改为暂停按钮，而不是播放按钮，并且图像应与第二个图像和暂停按钮保持一致。

<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>

第一张图片的类别是：

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

第二张图片：

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切换类；

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