jQuery 切换类 [英] jQuery toggle class

问题描述

我无法将 jQuery 的 toggleClass 函数添加到我的其余代码中.该页面上有几个 HTML5 音频标签，它们通过 jQuery 进行控制.我试图将切换功能添加到我的 jQuery 音频控制功能，但它没有添加类，随后音频控制不起作用..所以我想这是一些奇怪的语法错误.

你们有什么推荐的吗?下面是一个 jsFiddle 和我(不幸的是)弱的尝试:)

http://jsfiddle.net/danielredwood/FTfSq/10/

HTML:

<div class="thumbnail" id="狗仔队"><a class="播放"><img class="play" src="http://www.lucisz.com/imgs/play.png"/></a><音频><source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg"/><source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg"/>您的浏览器不支持 HTML5 音频.
<div class="thumbnail" id="danceinthedark"><a class="播放"><img class="play" src="http://www.lucisz.com/imgs/play.png"/></a><音频><source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg"/><source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg"/>您的浏览器不支持 HTML5 音频.

<div class="thumbnail" id="bornthisway"><a class="播放"><img class="play" src="http://www.lucisz.com/imgs/play.png"/></a><音频><source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg"/><source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg"/>您的浏览器不支持 HTML5 音频.

JavaScript:

var curPlaying;$(函数(){$(".playback").click(function(e){e.preventDefault();var song = $(this).next('audio')[0];Song.toggleClass("播放");如果(歌曲.暂停){歌曲播放()；if(curPlaying) $("audio", "#"+curPlaying)[0].pause();} 别的 {歌曲暂停()；}curPlaying = $(this).parent()[0].id;});});//下面的函数有效，但没有添加/删除类函数var curPlaying;$(函数(){$(".playback").click(function(e) {e.preventDefault();var song = $(this).next('audio')[0];如果(歌曲.暂停){歌曲播放()；if (curPlaying) $("audio", "#" + curPlaying)[0].pause();} 别的 {歌曲暂停()；}curPlaying = $(this).parent()[0].id;});});

解决方案

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

$('thumbnail').toggle(function(){$('.play', this).removeClass('暂停');$('.play', this).addClass('playing');}， 功能(){$('.play', this).addClass('pausing');$('.play', this).removeClass('playing');});

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屋！