3

WordPress を使用して音楽ブログを運営しており、そのためのカスタム音楽プレーヤーがあります。投稿に曲を添付するたびに、その情報を保持し、後でカスタム変数にアクセスする方法を作成したいと考えています。私が必要としているのは、次のようなものです...

<div class="playable" 
     title="Song Title" 
     mp3="URL" 
     soundcloudLink="https://soundcloud.com/cashcash/take-me-home-jordy-dazz">
</div>

次に、私$(document).ready()の関数では、クラス「再生可能」のすべてのオブジェクトを検索し、タイトルタグ、mp3 タグ、soundcloudLink タグなどにアクセスできる関数が必要になります。

簡単な提案はありますか？

4

3 に答える 3

5

data-*属性を探しているようです：

3.2.3.9 data-* 属性を使用したカスタム非表示データの埋め込み

カスタム データ属性は、名前が文字列「data-」で始まり、ハイフンの後に少なくとも 1 文字があり、XML 互換であり、大文字の ASCII 文字を含まない、名前空間のない属性です。

HTML ドキュメント内の HTML 要素のすべての属性名は自動的に ASCII 小文字になるため、ASCII 大文字の制限はそのようなドキュメントには影響しません。

カスタム データ属性は、ページまたはアプリケーション専用のカスタム データを格納するためのものであり、これ以上適切な属性や要素はありません。

これらの属性は、属性を使用するサイトから独立したソフトウェアによる使用を意図していません。

たとえば、それらは常に検証に合格し、使用のみを目的としています。

たとえば、次のようになります。

<div class = "playable"
     title = "Song Title"
     data-mp3 = "URL"
     data-soundcloudLink = "https://soundcloud.com/cashcash/take-me-home-jordy-dazz"
></div>

その情報にアクセスする必要がある場合は、 の jQuery オブジェクトを取得し、またはをdiv使用してアクセスします。(または、jQuery を使用しない場合は、 を取得して使用します。) 変更していないことに注意してください。は有効な属性であり、jQuery インスタンスまたはDOM 要素を介してアクセスできます。attr("data-mp3")data("mp3")HTMLDivElementgetAttributetitletitle.prop("title").title

data非対称であることに注意してください。初期化のために属性から読み取りますが、それらに書き込みdata-*ません。

于 2013-08-06T21:33:25.683 に答える
1

.data() メソッドで簡単に取得できる data- 属性を試すことができます。

HTML:

<div id="thing" data-title="Keine Lust" data-file="keine_lust.mp3"></div>

JQuery

var song_title = $("#thing").data("title");
var song_file = $("#thing").data("file");
于 2013-08-06T21:36:52.810 に答える
0

jquery 関数を使用して.hasClass()、そのクラスの要素の属性を表示できます。この場合、テストを追加したように、要素に ID を追加します。ここで、それらに警告する方法を示します。

   $(document).ready(function(){
var className = $('#test').hasClass('playable')
    if( className ){

        var url = $('#test').attr('soundcloudLink');
        var title = $('#test').attr('title');

        document.write(title);
        document.write(url);
    }


});

これは、要素にクラス playable がある場合、soundcloud リンクとタイトルを表示します。ここにフィドルがあります。http://jsfiddle.net/uprosoft/2Frk3/3/

于 2013-08-06T21:50:12.033 に答える