1

ここにはかなりの頭脳スクラッチャーがあります。

jQuery を使用して、html5 オーディオ タグの上に曲に関するデータを追加しようとしています。これをより自動化する方法は、オーディオタグに data-* 属性を追加することだと思いましたが、jQuery でそれらを取り戻そうとすると、「オブジェクト # にはメソッド '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>

これが機能しない理由を見つけようとしましたが、決定的な答えを見つけることができませんでした。

4

2 に答える 2

3

thisDOM オブジェクトを参照します。.data()は jQuery オブジェクトでのみ使用できるため、オブジェクトをドル記号関数で再ラップします。

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

またはより簡潔に：

$('audio').before(function() {
    return $('<div />', {
        text: $(this).data('artist')
    });
});
于 2013-02-10T01:57:39.560 に答える
1

this最初に jQueryでラップする必要があります。

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

または、ネイティブの HTML5 リストを使用することもできます (これは IE < 9 では機能しません)。

artist.html( this.dataset.artist );
于 2013-02-10T01:57:32.223 に答える