jQuery 发现无法使用音频源

Question

我有一个 Rails 应用程序，它在单个页面上有多个音频元素。要更改其中之一的源，我使用 jQuery 选择器定位音频元素，然后使用 .find("source") 获取子源元素。出于某种原因，这是行不通的。如果我有一个带有 id="change_me" 的音频元素和一个包含的源元素，

$("#change_me").find("source")

returns未定义。

这是一个说明问题的 jsFiddle。从父级使用 find() 失败，使用选择器“#change_me 源”也失败，但是引用源元素 id 的选择器直接 returns 元素。怎么回事？

https://jsfiddle.net/jplato/3v73nqd7/

Answer 1

change_me 中缺少 id selector，因为它是 audio 元素的 id。

audio = $("#change_me");
source = $("#change_me source");

您已将选择器用作 $("change_me")，即 element selector，因此它将搜索标签名称为 change_me 的元素，例如 <change_me></change_me>

演示：Fiddle

Answer 2

打错了。您的代码中缺少 #：

$("#click_me").click(function(e) {
    audio = $("change_me");
               ^==========>  #
    source = audio.find("source").first();
    console.log(source[0]);
    source = $("change_me source");
                ^=========>  #
    console.log(source[0]);
    source = $("#change_me_source");
    console.log(source[0]);
});

Answer 3

在我看来，解决此问题的最佳方法是在点击事件之外声明 source 变量，这样您就不需要遍历 DOM 太多。通过这样做，您也不需要全局变量。

JSFiddle

source = $('audio').children('source');
$("#click_me").click(function(e) {
    audio = $("change_me");
    console.log(source[0]);
    source = $("#change_me source");
    console.log(source[0]);
    source = $("#change_me_source");
    console.log(source[0]);
});

jQuery 发现无法使用音频源

jQuery find not working with audio source

javascript

jquery

html5-audio