Question

我这里有大脑痒。

我正在尝试使用jQuery在html5音频标签上添加有关歌曲的数据。我认为我可以做的更自动化的方法是将data- *属性添加到音频标签，但是当我尝试用jQuery将它们拉回来时，我得到错误：“对象＃没有方法'数据'。” / p>

<!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>

我试图找到一个不起作用的原因，但未能找到明确的答案。

Answer 1

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

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

或者更简洁：

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

Answer 2

首先必须在jQuery中包装this：

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

或者，您可以使用本机HTML5列表（在IE＆lt; 9中不起作用）：

artist.html( this.dataset.artist );

对象＃<htmlaudioelement>没有方法'data'</htmlaudioelement>

2 个答案: