Блог

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

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

Переключаемый класс: добавьте или удалите один или несколько классов из каждого элемента в наборе сопоставляемых элементов, в зависимости от наличия класса или значения аргумента switch.

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

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