Как получить SRC аудио элемент из списка в JavaScript

Question

Как я могу получить src тега audio, когда нажимаю на кнопку, которая его воспроизводит?

У меня много li тегов, каждый li содержит три тега:

1. Тег a, который берет источник дорожки, которая будет воспроизводиться.=> done
2. Тег audio, который похож на предыдущий элемент;Я просто использую его, чтобы взять src и подготовить его к получению с помощью 3 элемента.=> еще не сделано
3. тег button, который получает src тега audio, к которому он относится.

Когда я нажимаю на каждую кнопку, мне нужна функциячтобы вернуть мне src тега audio или a, который соответствует ему в том же теге 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

Без jQuery вы можете использовать previousElementSibling, чтобы получить соответствующий элемент audio кнопки и получить его значение src.

Здесь я также удалил встроенный JSи использовал addEventListener после выбора кнопок из DOM с помощью querySelectorAll, который является современным способом кодирования JS и делает вашу разметку более простой.Я использовал деструктурирующее задание , чтобы получить 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>

Answer 2

Всегда используйте уникальный идентификатор для элементов. Передайте элемент при вызове функции и получите от него атрибут 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 3

Я думаю братьев и сестер - это то, что вы ищете.Вы можете использовать его следующим образом:

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>

---

Редактировать: Код Объяснение:

Сначала в onclick из buttons, вы должны передать this ключевое слово, чтобы вы могли получить элемент button внутри вашей функции обратного вызова:

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

После этого внутри вашей функции обратного вызова onclick аргумент elmэто элемент кнопки, по которому щелкают, и мы преобразуем его в элемент jquery, используя $(elm), чтобы использовать его функцию siblings, которая возвращает элементы одного и того же элемента кнопки.Здесь мы используем селектор "audio", потому что мы просто хотим получить брат audio кнопки, а также first(), потому что функция siblings будет возвращать список соответствующих элементов, в то время как мы просто хотим первый элемент.

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

Так что теперь $aud - это элемент audio, связанный с нажатой кнопкой, и мы должны получить его атрибут src, используя функцию attr.

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

Answer 4

onclick может принимать аргумент, представляющий событие "click" (например, onclick="getTrack(event)").Внутри функции это событие click имеет свойство .target, которое вы можете использовать, чтобы войти в DOM и получить сам элемент button.Затем вы можете «пройтись» вверх по дереву 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);
}