jQuery的切换类 [英] jQuery toggle class

问题描述

我无法在加入jQuery的toggleClass功能到我的code的其余部分。该页面有它们通过jQuery控制它的几个HTML5音频标签。我试图切换功能添加到我的jQuery的音频控制功能，但它不添加类，随后音频控制不工作..所以我想这是一些奇怪的语法错误。

你们有什么建议？下面是一个的jsfiddle和我（不幸）两掌：）

<一个href=\"http://jsfiddle.net/danielredwood/FTfSq/10/\">http://jsfiddle.net/danielredwood/FTfSq/10/

HTML

 ＆LT; D​​IV ID =music_right＆GT;
    ＆LT; D​​IV CLASS =缩略图ID =狗仔队＆GT;
        ＆LT;一类=播放＆GT;
            ＆LT; IMG类=玩SRC =htt​​p://www.lucisz.com/imgs/play.png/＆GT;
        ＆所述; / A＆GT;
        ＆LT;音频＆GT;
         ＆lt;信源SRC =../音频/ fernando_garibay_paparazzisnlmix.oggTYPE =音频/ OGG/＆GT;
            ＆lt;信源SRC =../音频/ fernando_garibay_paparazzisnlmix.mp3TYPE =音频/ MPEG/＆GT;
            您的浏览器不支持HTML5音频。
        ＆LT; /音频＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =缩略图ID =danceinthedark＆GT;
        ＆LT;一类=播放＆GT;
            ＆LT; IMG类=玩SRC =htt​​p://www.lucisz.com/imgs/play.png/＆GT;
        ＆所述; / A＆GT;
        ＆LT;音频＆GT;
         ＆lt;信源SRC =../音频/ fernando_garibay_danceinthedark.oggTYPE =音频/ OGG/＆GT;
            ＆lt;信源SRC =../音频/ fernando_garibay_danceinthedark.mp3TYPE =音频/ MPEG/＆GT;
            您的浏览器不支持HTML5音频。
        ＆LT; /音频＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =缩略图ID =bornthisway＆GT;
        ＆LT;一类=播放＆GT;
            ＆LT; IMG类=玩SRC =htt​​p://www.lucisz.com/imgs/play.png/＆GT;
        ＆所述; / A＆GT;
        ＆LT;音频＆GT;
         ＆lt;信源SRC =../音频/ fernando_garibay_bornthisway.oggTYPE =音频/ OGG/＆GT;
            ＆lt;信源SRC =../音频/ fernando_garibay_bornthisway.mp3TYPE =音频/ MPEG/＆GT;
            您的浏览器不支持HTML5音频。
        ＆LT; /音频＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JavaScript的：

  VAR curPlaying;
$（函数（）{
    $（回放）。点击（函数（五）{
        亦即preventDefault（）;
        VAR歌= $（本）。接下来（'声音'）[0];
        song.toggleClass（打）;
        如果（song.paused）{
            song.play（）;
            如果（curPlaying）$（音频，＃+ curPlaying）[0] .pause（）;
        }其他{
            song.pause（）;
            }
        curPlaying = $（本）.parent（）[0] .ID;
    }）;
}）;//下面的作品的功能，但没有添加/删除类函数VAR curPlaying;
$（函数（）{
    $（回放）。点击（函数（五）{
        亦即preventDefault（）;
        VAR歌= $（本）。接下来（'声音'）[0];
        如果（song.paused）{
            song.play（）;
            如果（curPlaying）$（音频，＃+ curPlaying）[0] .pause（）;
        }其他{
            song.pause（）;
        }
        curPlaying = $（本）.parent（）[0] .ID;
    }）;
}）;
 

解决方案

我会用 .addClass（） 和 .removeClass（） ，因为它会清理code颇有几分，并允许您使用CSS来执行所有的布置工作：

  $（'缩略图'）。切换（函数（）{
    $（'玩'，这一点）.removeClass（'暂停'）;
    $（'玩'，这一点）.addClass（'玩'）;
}，函数（）{
    $（'玩'，这一点）.addClass（'暂停'）;
    $（'玩'，这一点）.removeClass（'玩'）;
}）;
 

I'm having trouble adding in jQuery's toggleClass function into the rest of my code. The page has several HTML5 audio tags on it which are controlled via jQuery. I attempted to add the toggle function to my jQuery audio control function, but it's not adding the class and subsequently the audio control doesn't work.. so I suppose it's some weird syntax error.

What do you guys recommend? Below is a jsFiddle and a my (unfortunately) weak attempt :)

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;
    });
});

解决方案

I would use .addClass() and .removeClass(), as it'll clean up your code quite a bit and allow you to use CSS to perform all that layout work:

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

这篇关于jQuery的切换类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！