Javascript 复制不同标记的行为的困难

我试图复制玩家的以下行为：除了这一点之外，我还能做任何事情（您可以查看页面源代码以获取完整代码）

演示页面具有以下结构：

<ol> 
  <li class="playing">
    <a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a>
  </li>

  <li class="playing">
    <a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a>
  </li>

  <li class="playing">
    <a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a>
  </li>

  <!-- Etc -->
</ol>

<div class="main">
  <article class="article>

    <!-- .. -->
    <div class="article-footer>
      <ul>
        <li>
          <a class="article-play" href="#" data-src="http://somesongurl.com/file.mp3"></a>
        </li>
      </ul>
    </div>

  </article>
</div>

但它不起作用，一旦歌曲播放完毕并应该切换到下一首，src-inside-audio标签就变成了

src=“undefined”

我是jQuery新手，可能不知道如何实现正确的结构，所以我请求社区帮助

EDIT在每个.article footer div中都有其他列表元素，其中包含锚定标记。因此，需要专门从锚定类中查找播放器的src。article play

next（）

正在获取元素的下一个同级。在代码中，您试图获取锚标记的下一个同级，但在一个列表项中只有一个锚元素。您可以通过将“playing”类添加到列表项而不是锚定标记来解决此问题，这样您的播放器就可以按预期工作

因此，不要这样：

var next = $('.main a.playing').next();

var next = $('.main li.playing').next();

使用以下命令：

var next = $('.main a.playing').next();

var next = $('.main li.playing').next();

这样列表项将获得“playing”类，并且您将能够访问下一个列表项

jQuery文档：