Question

我有一个网页，上面有歌曲列表。当您单击其中一首歌曲时，它应该会自动开始播放，因为它会下拉/将音乐播放器动画到屏幕中。

我有一堆同一类的div。他们每个人都有一个独特的子元素，它拥有自己唯一的ID。我试图通过通配符获取它，因为每个都有不同的数字，但每个div只有一个。我知道.find()搜索给定节点内的所有内容，所以我不确定为什么我的方法不起作用。

该页面由一堆歌曲组成，每首歌曲都有自己的媒体播放器/容器。还有一个虚拟容器，它总是在列表顶部播放相同的歌曲以进行调试。每当我点击一首歌曲（任何一首歌曲）时，我都可以让虚拟容器播放，但其他歌曲都不会起作用。

如果我使用此代码，它可以正常工作：

$('body').find('[id^=mediaContainer]').jPlayer('play');

但是，如果我使用它，它永远不会播放，无论我点击哪一个：

$(this).find('[id^=mediaContainer]').jPlayer('play');

这两个都在.click()函数内。

    $('.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();
                $('body').find('[id^=mediaContainer]').jPlayer('play');
            } else {
                $(".selectedTrack").removeClass("selectedTrack");
                $(this).find('.trackPlayer').slideUp();
            }
        }).find('.trackPlayer').click(function(e) {
            e.stopPropagation();
        });

虚拟容器标记为mediaContainer，而实时容器标记为mediaContainer1，mediaContainer2，依此类推。这会导致问题吗？我不明白它是怎么回事，因为.track的每个实例里面只有一个mediaContainer个实例。

可能是jQuery slideDown()动画还没有完成，所以它无法开始播放音频，还是语法错误？不知道为什么它不起作用，任何帮助都表示赞赏。

我也尝试过以这种方式引用其中一个活动容器：

$('body').find('#mediaContainer1').jPlayer('play');

但那也没有用。它唯一适用的是虚拟容器，它不会隐藏起来，这让我相信它可能是.slideDown()的问题。如果这是一个问题，如果有人能够在.slideDown()完成后解释如何发送该命令，那就太好了。

Answer 1

jQuery的slideDown函数（与许多其他函数一样）接受动画完成后执行的函数。因此，您可能希望在代码中找到类似这样的内容。

...
$(this).find('.trackPlayer').slideDown(function () {
    $(this).find('[id^=mediaContainer]').jPlayer('play');
});
...

jQuery .find（）通配符不适用于索引ID

1 个答案: