点击更改课程

时间:2016-05-10 03:32:37

标签: javascript jquery html

我正在研究一个项目,现在我需要一些帮助。

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

enter image description here

并且

on mouse over this is gonna show

enter image description here

当用户点击播放按钮时,音乐应该可以正常工作。但它应该更改为暂停按钮而不是播放按钮,并且图像应该保留第二个图像和暂停按钮。



<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>
&#13;
&#13;
&#13;

第一张图片的类别是:

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

问候

1 个答案:

答案 0 :(得分:0)

您可以使用toggleClass;

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