卡住多点击事件

Stuck with multi click event

本文关键字：事件 多点      更新时间：2023-09-26

我被困在下面。我有一个播放按钮。当用户第一次单击它时，它应该播放歌曲并向其添加暂停按钮。第二次单击该按钮时，它应该暂停歌曲。

想出了这个：

$('.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时，向我发送曲目ID：91298058，true，并且字符串hellooo在流函数中，并且歌曲正在播放。第二次它还会给我跟踪ID 91298058，假和字符串hellooo。所以错误就在这里。每当您单击字符串时hellooo都会发送到console.log。console.log - byeee永远不会发送，因此永远不会暂停。

简而言之，我希望有一个按钮，可以从播放切换到暂停和反转。在播放时，它应该播放歌曲：sound.play();，在暂停时，它应该暂停歌曲：sound.pause(); ;

现场演示

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

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

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

$('.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类，而不是play pause。

我想出了以下解决方法：在 click 函数内创建一个布尔值并将其调用 bool 。默认值为 false; 。

它与上述@Colin德尔哈勒的代码非常相似。

$('.play').click(function(event) {
        event.preventDefault();
        var trackID = $(this).closest('li').attr('data-id');
        console.log(trackID);
        $('#playlist li').removeClass('active');
        $(this).closest('li').addClass('active'); 
        var bool = false;
        if ( $(this).hasClass('play pause') ) {
            console.log('false');
            bool = false;
            $(this).removeClass('pause');
        } else {
            console.log('true');
            $('#playlist li a').removeClass('pause');
            $(this).addClass('pause');
            bool = true;
        }
        if (nowPlaying) {
            nowPlaying.stop();
        }
        SC.stream('/tracks/' + trackID, function(sound) {
            if (bool) {
                console.log('play');
                sound.play();
                nowPlaying = sound;
            } else {
                console.log('pause');
                sound.pause();
                nowPlaying = sound;
            }
        });
    });

我唯一觉得很奇怪的是，功能暂停不是暂停歌曲，而是停止它。有谁知道为什么？

你能试着评论这一行吗？

            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;
                }
            });
相关文章：