jquery - 对象 #<HTMLAudioElement> 没有方法 'data'

标签 jquery html5-audio custom-data-attribute

我在这里很费脑筋。

我正在尝试使用 jQuery 在 html5 音频标签上方添加有关歌曲的数据。我想出了一种更自动化的方法,就是向音频标签添加 data-* 属性,但是当我尝试用 jQuery 将它们拉出来时,我收到错误:“Object # has no method 'data'”。

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
         <audio controls data-artist="horse">
              <source src="horse.ogg" type="audio/ogg">
              <source src="horse.mp3" type="audio/mpeg">
              <a href="horse.mp3">horse</a>
        </audio>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script>
            $(function(){
                $('audio').before(function(){
                    artist = $('<div>');
                    artist.html(this.data('artist'));
                    return artist;
                });
            });
        </script>
    </body>
</html>

我试图找出这不起作用的原因,但未能找到明确的答案。

最佳答案

this 指的是 DOM 对象。 .data() 仅适用于 jQuery 对象,因此请使用美元符号函数重新包装您的对象:

$(this).data('artist');

或更简洁地说:

$('audio').before(function() {
    return $('<div />', {
        text: $(this).data('artist')
    });
});

关于jquery - 对象 #<HTMLAudioElement> 没有方法 'data',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14793861/

相关文章:

javascript - AudioNode.disconnect() 后跟 .connect() 在 Safari 中不起作用

javascript - 使用JQueryUI作为音频搜索控件,并在更改歌曲时将新的 slider 重新绑定(bind)到相同的<audio>控件

javascript - 选择具有数据名称的所有标签 - 获取值 - 设置类

javascript - 检索并循环元素中以字符串开头的所有数据属性

jquery - 隐藏输入与 HTML5 数据属性

javascript - 如何跨函数使用和重用 JS 变量

javascript - 如何使用jquery缩放带有背景图像的内容?

php - 测试与数据库的连接,返回 true 或 false

javascript - IE11 对象不支持属性或方法 'normalize'

javascript - 如何使用JavaScript播放一组WAV文件