大佬教程收集整理的这篇文章主要介绍了jQuery切换类,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
你们推荐什么?下面是一个jsfiddle和我(不幸的)弱尝试:)
http://jsfiddle.net/danielredwood/FTfSq/10/
HTML:
<div id="music_right"> <div class="thumbnail" id="paparazzi"> <a class="playback"> <img class="play" src="http://www.lucisz.com/imgs/play.png" /> </a> <audio> <source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" /> <source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" /> Your browser does not support HTML5 audio. </audio> </div> <div class="thumbnail" id="danceinthedark"> <a class="playback"> <img class="play" src="http://www.lucisz.com/imgs/play.png" /> </a> <audio> <source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" /> <source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" /> Your browser does not support HTML5 audio. </audio> </div> <div class="thumbnail" id="bornthisway"> <a class="playback"> <img class="play" src="http://www.lucisz.com/imgs/play.png" /> </a> <audio> <source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" /> <source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" /> Your browser does not support HTML5 audio. </audio> </div> </div>
JavaScript的:
var curPlaying; $(function() { $(".playback").click(function(e){ e.preventDefault(); var song = $(this).next('audio')[0]; song.toggleClass("playing"); if(song.paused){ song.play(); if(curPlaying) $("audio","#"+curPlaying)[0].pause(); } else { song.pause(); } curPlaying = $(this).parent()[0].id; }); }); //the function below works,but doesn't have the add/remove class functions var curPlaying; $(function() { $(".playback").click(function(e) { e.preventDefault(); var song = $(this).next('audio')[0]; if (song.paused) { song.play(); if (curPlaying) $("audio","#" + curPlaying)[0].pause(); } else { song.pause(); } curPlaying = $(this).parent()[0].id; }); });
.addClass()
和
.removeClass()
,因为它会清理你的代码并允许你使用CSS来执行所有布局工作:
$('thumbnail').toggle(function(){ $('.play',this).removeClass('pausing'); $('.play',this).addClass('playing'); },function(){ $('.play',this).addClass('pausing'); $('.play',this).removeClass('playing'); });
以上是大佬教程为你收集整理的jQuery切换类全部内容,希望文章能够帮你解决jQuery切换类所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。