javascript - 单击更改类别

Question

我正在开发一个项目，现在需要一些帮助。

当用户进入网站时，他们将看到此图像

和

鼠标悬停在此处将会显示

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

<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。当用户再次单击该图像时它应该反转。

此致

奈

Answer 1

您可以使用toggleClass切换类；

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