3

I run a music blog using WordPress and I have a custom music player for it. Every time a post has a song attached to it, I want to create a way to hold that information and later access custom variables. What I need is something along the lines of...

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

Then in my $(document).ready() function I would need a function that finds all objects of class "playable" and be able to access the title tag, mp3 tag, soundcloudLink tag, etc.

Any easy suggestions?

4

3 回答 3

5

听起来您正在寻找data-*属性：

3.2.3.9 使用 data-* 属性嵌入自定义不可见数据

自定义数据属性是无名称空间中的属性，其名称以字符串“data-”开头，连字符后至少有一个字符，与 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，然后使用attr("data-mp3")ordata("mp3")来访问它。（或者没有 jQuery，获取HTMLDivElement并使用getAttribute.）请注意，我没有更改title. title是一个有效属性，可以通过.prop("title")jQuery 实例或.titleDOM 元素访问。

请注意，这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

您可以使用.hasClass()jquery 函数来显示具有该类的元素的属性。向元素添加一个 ID，就像在这种情况下我添加了 test.. 这里是如何提醒他们。

   $(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);
    }


});

如果元素具有可播放类，则此选项会显示 soundcloud 链接和标题。这是一个小提琴。http://jsfiddle.net/uprosoft/2Frk3/3/

于 2013-08-06T21:50:12.033 回答