Question

我有一个歌曲列表，当您点击一首歌曲时，会出现一个下拉菜单并开始播放该歌曲。我已经进行了设置，因此如果您单击下拉菜单，它不会自动启动，您仍然必须单击原始轨道详细信息才能将其重新启动。

我还想将此功能附加到其他按钮。但是，在不同的页面上，我有歌曲标题旁边的播放/暂停按钮，我也希望将stopPropagation()功能附加到它们。

以下是该页面：http://shacktown.com/oldstage.php

我正在使用的代码在这里：

    $(document).ready(function(){
        $('.track').click(function(){
            if ( $(this).find('.trackPlayer').is(':hidden') ) {
                //removing color from prev. track
                $(".selectedTrack").removeClass("selectedTrack");
                $('.trackPlayer').slideUp();
                $(this).addClass("selectedTrack");
                $(this).find('.trackPlayer').slideDown();

            } else {
                $(".selectedTrack").removeClass("selectedTrack");
                $(this).find('.trackPlayer').slideUp();
            }
        }).find('.trackPlayer').click(function(e) {
            e.stopPropagation();
        });
    });

我的问题是，如何在不必创建另一个.find()块的情况下附加其中一个stopPropagation() / $(document).ready(function(){})函数？

单击暂停/播放/停止按钮也不会导致菜单下拉，我希望按钮被视为完全不在.track父级内部，如果可能的话。

Answer 1

您可以提供多个CSS选择器。在您的情况下，.trackInfo div包含播放/暂停按钮，因此代码将为

.find('.trackPlayer, .trackInfo').click(function(e) {
    e.stopPropagation();
});

_{很酷的音乐，顺便说一下！}

Answer 2

您可以在同一document.ready块中添加新的点击事件：

$(document).ready(function(){
    $('.track').click(function(){
        if ( $(this).find('.trackPlayer').is(':hidden') ) {
            //removing color from prev. track
            $(".selectedTrack").removeClass("selectedTrack");
            $('.trackPlayer').slideUp();
            $(this).addClass("selectedTrack");
            $(this).find('.trackPlayer').slideDown();

        } else {
            $(".selectedTrack").removeClass("selectedTrack");
            $(this).find('.trackPlayer').slideUp();
        }
    }).find('.trackPlayer').click(function(e) {
        e.stopPropagation();
    });

    $('.mybutton').click(function(){
        // do stuff here
    });
});

Answer 3

您不必将所有通话链接在一起。只需将它们分开，再拨打find对象上的.track即可。

$(document).ready(function(){
    var track = $('.track');

    track.click(function(){
        if ( $(this).find('.trackPlayer').is(':hidden') ) {
            //removing color from prev. track
            $(".selectedTrack").removeClass("selectedTrack");
            $('.trackPlayer').slideUp();
            $(this).addClass("selectedTrack");
            $(this).find('.trackPlayer').slideDown();

        } else {
            $(".selectedTrack").removeClass("selectedTrack");
            $(this).find('.trackPlayer').slideUp();
        }
    });

    track.find('.trackPlayer').click(function(e) {
        e.stopPropagation();
    });

    track.find('.somethingElse').click(function(e) {
        e.stopPropagation();
    });
});

如果要保持链接，请使用end返回上一个上下文。

$(document).ready(function(){
    $('.track').click(function(){
        if ( $(this).find('.trackPlayer').is(':hidden') ) {
            //removing color from prev. track
            $(".selectedTrack").removeClass("selectedTrack");
            $('.trackPlayer').slideUp();
            $(this).addClass("selectedTrack");
            $(this).find('.trackPlayer').slideDown();

        } else {
            $(".selectedTrack").removeClass("selectedTrack");
            $(this).find('.trackPlayer').slideUp();
        }
    })
    .find('.trackPlayer').click(function(e) {
        e.stopPropagation();
    })
    .end()
    .find('.somethingElse').click(function(e) {
        e.stopPropagation();
    });
});

jQuery对多个子对象的stopPropagation（）

3 个答案: