我正在研究一个项目,现在我需要一些帮助。
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>
&#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
。当用户再次点击它时,它应该反转。
问候
奈
答案 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');
)};