Question

对js来说相当新，所以试图获得基础知识。

我有一个项目，其中我有一个包含歌曲列表的div：

<div id="songs">
  <p>01 a la verticale <span class="title">[play]</span></p>
  <audio class="song" id="verticale" src="Songs/01_a_la_verticale.mp3" onended="audioEnd()"></audio>

  <p>02 éphémère <span class="title">[play]</span></p>
  <audio class="song" id="ephemere" src="Songs/02_ephemere.mp3" onended="audioEnd()"></audio>

  <p>03 geste humain <span class="title">[play]</span></p>
  <audio class="song" id="geste" src="Songs/03_geste_humain.mp3" onended="audioEnd()"></audio>

  <p>04 la seule chose <span class="title">[play]</span></p>
  <audio class="song" id="chose" src="Songs/04_la_seule_chose.mp3" onended="audioEnd()"></audio>
</div>

在我的html中，每个p标签里面都有一个span，上面写着“play”，我正在尝试实现这个功能。

我知道如何使用.play和.pause等...但我的问题是如何获取点击歌曲的音频元素。这是我尝试过的：

jQuery：

  $(".title").click(function() {
      var myAudioElement = $(this).parent().next("#song");
      var myId = myAudioElement.attr('id');

      alert(myId);
});

我想要的只是暂时到达元素。我的逻辑是标签跨度在p标签内，所以，从点击的跨度开始，我需要首先到达它的父节点（p标签），然后用参数“song”进入next（），这将给我下一个元素（音频）在div的歌曲中。

但警报框以“未定义”返回。

我做错了什么？

Answer 1

你有一个错字。歌是一个类，而不是一个id：

var myAudioElement = $(this).parent().next(".song");

Answer 2

通过 nextElementSibling DOM属性完成后面的一个元素（下一个直接元素兄弟）。这不应与 nextSibling DOM属性混淆，后者将返回最初指定节点之后的任何节点。

Answer 3

你可以简单地使用：

$(this).parent().next("audio");
//Or also using the general class 'song'
$(this).parent().next(".song");

希望这有帮助。

$(".title").click(function() {
  var myAudioElement = $(this).parent().next("audio");
  var myId = myAudioElement.attr('id');

  console.log(myId);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="songs">

  <p>01 a la verticale <span class="title">[play]</span></p>
  <audio class="song" id="verticale" src="Songs/01_a_la_verticale.mp3" onended="audioEnd()"></audio>

  <p>02 éphémère <span class="title">[play]</span></p>
  <audio class="song" id="ephemere" src="Songs/02_ephemere.mp3" onended="audioEnd()"></audio>

  <p>03 geste humain <span class="title">[play]</span></p>
  <audio class="song" id="geste" src="Songs/03_geste_humain.mp3" onended="audioEnd()"></audio>

  <p>04 la seule chose <span class="title">[play]</span></p>
  <audio class="song" id="chose" src="Songs/04_la_seule_chose.mp3" onended="audioEnd()"></audio>
</div>

如何获取具有特定ID

3 个答案: