jQuery切换类

Question

我无法将 jQuery 的 toggleClass 函数添加到我的其余代码中。该页面上有几个通过 jQuery 控制的 HTML5 音频标签。我试图将切换功能添加到我的 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;
    });
});

Answer 1

$('thumbnail').toggleClass('pausing playing');

ToggleClass：根据类的存在或 switch 参数的值，从匹配元素集中的每个元素中添加或删除一个或多个类。

Answer 2

我会使用.addClass() 和.removeClass()，因为它会清理您的代码并允许您使用 CSS 来执行所有布局工作：

$('thumbnail').toggle(function(){
    $('.play', this).removeClass('pausing');
    $('.play', this).addClass('playing');
}, function(){
    $('.play', this).addClass('pausing');
    $('.play', this).removeClass('playing');
});