JQuery класс переключения - PullRequest
Новая
       21

JQuery класс переключения

6 голосов
/ 20 апреля 2011

У меня проблемы с добавлением функции toggleClass в jQuery в остальную часть моего кода.На странице есть несколько аудио-тегов HTML5, которые контролируются с помощью jQuery.Я попытался добавить функцию переключения в мою функцию управления звуком 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;
    });
});

Ответы [ 2 ]

15 голосов
/ 25 июня 2012 
$('thumbnail').toggleClass('pausing playing');

ToggleClass : Добавить или удалить один или несколько классов из каждого элемента в наборе соответствующих элементов в зависимости от наличия класса или значения аргумента switch.

5 голосов
/ 20 апреля 2011

Я бы использовал .addClass() и .removeClass(), так как это немного очистит ваш код и позволит вам использовать CSS для выполнения всей этой работы с макетом: 

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