如何从javascript中的列表中获取音频元素的src

Question

当我点击播放它的按钮时，如何获取audio 标签的源代码？

我有很多li标签，每个li包含三个标签：

1. 一个a 标签，它获取将要播放的曲目的来源。 => 完成
2. 一个audio标签，类似于之前的元素；我只是用它来获取 src 并准备好使用 3 元素获取它。 => 还没有完成
3. 一个button标签，它获取与之相关的audio标签的src。

当我单击每个按钮时，我希望该函数将audio 或a 标记的src 返回给我，它们在同一个li 标记中与之对应。

这是我的代码：

<ul id="playList">
  <li>
    <a href="audio/track1.mp3">track1</a>
    <audio src="audio/track1.mp3" id="aud"></audio>
    <button onclick="getTrack()">get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3">track2</a>
    <audio src="audio/track2.mp3" id="aud"></audio>
    <button onclick="getTrack()">get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3">track3</a>
    <audio src="audio/track3.mp3" id="aud"></audio>
    <button onclick="getTrack()">get this track src</button>
  </li>
</ul>

Answer 1

我认为siblings 是您正在寻找的。你可以像下面这样使用它：

function getTrack(elm){
let $aud = $(elm).siblings( "audio" ).first();
console.log($aud.attr("src"));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="playList">
  <li>
    <a href="audio/track1.mp3">track1</a>
    <audio src="audio/track1.mp3" id="aud"></audio>
    <button onclick="getTrack(this)">get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3">track2</a>
    <audio src="audio/track2.mp3" id="aud"></audio>
    <button onclick="getTrack(this)">get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3">track3</a>
    <audio src="audio/track3.mp3" id="aud"></audio>
    <button onclick="getTrack(this)">get this track src</button>
  </li>
</ul>

---

编辑：代码说明：

首先在buttons 的onclick 中，您应该传递this 关键字，以便您可以在回调函数中检索按钮元素：

<button onclick="getTrack(this)">get this track src</button>

在onclick 回调函数内部，参数elm 是被点击的按钮元素，我们将使用$(elm) 将其转换为jquery 元素以使用它的siblings 函数返回按钮的兄弟姐妹元素。这里我们使用"audio" 选择器，因为我们只想检索按钮的audio 兄弟，而first() 是因为siblings 函数将返回匹配元素的列表，而我们只需要第一个元素。

let $aud = $(elm).siblings( "audio" ).first();

所以现在$aud 是与按下的按钮关联的audio 元素，我们应该使用attr 函数获取它的src 属性。

console.log($aud.attr("src"));

Answer 2

onclick 可以接受代表“点击”事件的参数（如onclick="getTrack(event)"）。在函数内部，该点击事件有一个 .target 属性，您可以使用它进入 DOM 并获取按钮元素本身。然后你可以“走”上 DOM 树并选择不同的元素，例如：

function getTrack(event){
  const btn = event.target;
  const li = btn.parentElement;
  const audio = li.children[1];
  const src = audio.getAttribute("src");
  console.log(src);
}

Answer 3

始终为元素使用唯一 id。在函数调用时传递元素并从中获取 href 属性

function getTrack(id)
{

console.log(id.getAttribute("src"))
}

<ul id="playList">
  <li>
    <a href="audio/track1.mp3" >track1</a>
    <audio src="audio/track1.mp3" id="aud1"></audio>
    <button onclick="getTrack(aud1)">get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3" >track2</a>
    <audio src="audio/track2.mp3" id="aud2"></audio>
    <button onclick="getTrack(aud2)">get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3"  >track3</a>
    <audio src="audio/track3.mp3" id="aud3"></audio>
    <button onclick="getTrack(aud3)">get this track src</button>
  </li>
</ul>

Answer 4

如果不使用 jQuery，您可以使用 previousElementSibling 获取按钮对应的 audio 元素，并获取它的 src 值。

在这里，我还删除了内联 JS，并在使用 querySelectorAll 从 DOM 中选择按钮后使用了 addEventListener，这是编写 JS 的现代方式，并使您的标记更精简。我使用destructuring assignment 从点击的元素中获取previousElementSibling 并将其重新标记为“音频”。

const buttons = document.querySelectorAll('#playList button');
[...buttons].forEach(button => button.addEventListener('click', getTrack, false));

function getTrack() {
  const { previousElementSibling: audio } = this;
  console.log(audio.src);
}

<ul id="playList">
  <li>
    <a href="audio/track1.mp3">track1</a>
    <audio src="audio/track1.mp3" id="aud"></audio>
    <button>get this track src</button>
  </li>
  <li>
    <a href="audio/track2.mp3">track2</a>
    <audio src="audio/track2.mp3" id="aud"></audio>
    <button>get this track src</button>
  </li>
  <li>
    <a href="audio/track3.mp3">track3</a>
    <audio src="audio/track3.mp3" id="aud"></audio>
    <button>get this track src</button>
  </li>
</ul>