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

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-*属性:

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")或data("mp3")访问它.(或者没有jQuery,得到HTMLDivElement并使用getAttribute.)请注意,我没有改变title.title是一个有效的属性,可以通过.prop("title")jQuery实例或.titleDOM元素访问.

注意data是不对称的:它从属性读取data-*初始化,但不写入它们.