Question

我使用WordPress运行音乐博客，我有一个自定义音乐播放器。每当帖子附加一首歌曲时，我想创建一种方法来保存该信息，然后访问自定义变量。我需要的东西是......

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

然后在我的$(document).ready()函数中，我需要一个函数来查找类“playable”的所有对象，并能够访问title标签，mp3标签，soundcloudLink标签等。

任何简单的建议？

Answer 1

听起来你正在寻找data-* attributes：

3.2.3.9使用data- * attributes
嵌入自定义不可见数据
自定义数据属性是no namespace中的一个属性，其名称以字符串“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>

当您需要访问该信息时，您将获得div的jQuery对象，然后使用attr("data-mp3")或data("mp3")来访问它。（或者没有jQuery，获取HTMLDivElement并使用getAttribute。）请注意，我没有更改title。 title是一个有效的属性，可以通过jQuery实例上的.prop("title")或DOM元素上的.title访问。

请注意，data是不对称的：从data-*属性读取以进行初始化，但不会写给它们。

Answer 2

您可以尝试使用.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");

Answer 3

您可以使用.hasClass() jquery函数显示该类的元素属性。在元素中添加一个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);
    }


});

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

如何保存“隐形”值并使用JavaScript获取它们

3 个答案: