javascript - 使用Jquery的.closest访问音频元素不起作用？

我使用.each()和before()在'pipe1'类的每个元素之前自动插入一个带有'product_name'类的音频元素，以实现悬停效果，因为单个音频元素本身不能重叠，因此每个按钮都需要自己的声音效果。

我知道插入是有效的，因为当我检查页面时会看到该元素。该元素在直接访问时播放，但是现在使用.closest()无效。任何帮助是极大的赞赏。

以下是生成的HTML，是通过Firefox的“检查元素”发现的:

<audio class="pipe1">
  <source src="/frontshift/audio/pipe1.mp3"></source>
  <source src="/frontshift/audio/pipe1.ogg"></source>
</audio>
<span class="product_name">Product</span>

我正在使用的所有代码都以相同的.hover效果激活，即$(".product_name").hover()
以下代码成功播放了音频:

$(".pipe1")[0].currentTime = .04;
$(".pipe1")[0].play();

以下代码不支持:

$(this).closest(".pipe1").currentTime = .04;
$(this).closest(".pipe1").play();

以下警报显示为未定义:

alert($(this).closest(".pipe1").attr("class"));

最佳答案

.closest()选择祖先，使用.prev()选择 previous sibling 姐妹

var audio = $(this).prev(".pipe1")[0];
audio.currentTime = .04;
audio.play();