javascript - 卡住了多次点击事件

Question

我被以下问题困住了。我有一个播放按钮。当用户第一次单击它时，它应该播放歌曲并为其添加暂停按钮。第二次单击该按钮时，它应该暂停歌曲。

想出了这个:

$('.play').click(function(event) {
        event.preventDefault();

        var trackID = $(this).closest('li').attr('data-id');
        console.log(trackID);

        $('#playlist li').removeClass('active');
        $(this).parent().addClass('active'); 


        if ( $(this).hasClass('play pause') ) {
            console.log('false');
            $(this).removeClass('pause');
        } else {
            console.log('true');
            $(this).addClass('pause');
            //return false;
        }

        if (nowPlaying) {
            nowPlaying.stop();
        }


        SC.stream('/tracks/' + trackID, function(sound) {
            if ( !$(this).hasClass('play pause') ) {
                console.log('hellooo');
                sound.play();
                nowPlaying = sound;
            } else {
                console.log('byeee');
                sound.pause();
                nowPlaying = sound;
            }
        });

   });

以上部分将正常工作。播放是按钮的默认设置。当单击 console.log 时，向我发送 trackID:91298058、true，以及流函数内的字符串 hellooo 并且正在播放歌曲。第二次它还会给我 trackID 91298058, false 以及字符串 hellooo。所以bug就在这里。每当您单击字符串 hellooo 时，都会将其发送到 console.log。并且 console.log - byeee 永远不会被发送，因此永远不会被暂停。

简而言之，我想要一个可以从播放切换到暂停和倒退的按钮。播放时应播放歌曲:sound.play();，暂停时应暂停歌曲:sound.pause();;

Live demo

有人知道如何解决这个问题吗？

Answer 1

在传递给 SC.stream 的回调函数中，$(this) 被重新定义。

您应该将其缓存在附加到点击事件的函数中，并在之后使用它。

$('.play').click(function(event) {
    event.preventDefault();

    var button = $(this);

    // the code

    SC.stream('/tracks/' + trackID, function(sound) {
        if ( button.hasClass('play pause') ) {
            console.log('hellooo');
            sound.play();
            nowPlaying = sound;
        } else {
            console.log('byeee');
            sound.pause();
            nowPlaying = sound;
        }
    });

此外，您可以只检查类 pause 是否存在，而不是播放暂停。