包含选项

Question

我已经在我的网站上实现了共享按钮，这些按钮将每个社交网站的数据属性（在下面的示例中）中的单独组件一起传递。

HTML

<span data-title="Stackoverflow" data-description="Website" data-media="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a" data-url="url":"https://stackoverflow.com/questions/" class="share">     

脚本

var base = $('.share'),
    thisUrl = window.location.href,
    thistitle = base.data('title'),
    thisdescription = base.data('description'),
    thismedia = base.data('media');

我更喜欢做的是，只有一个数据字符串，就像我在下面放在一起的包含所有选项的数据字符串一样，然后我可以拆分并传递给：

title = options.title

description = options.description

media = options.media

url = options.url

HTML：

<span data-opt="{"options":{"title":"Stackoverflow","description":"Website","media":"https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a","url":"https://stackoverflow.com/questions/"}}" >     

任何帮助指出我正确的方向或任何建议将不胜感激。

Answer 1

将外部属性值引用更改为单个引用，并使用jQuery data（）获取整个对象。

只要字符串是有效的json，data（）就会自动将其解析为object / array

＆＃13;

＆＃13;

var data = $('span[data-opt]').data('opt');
console.log('Title is', data.options.title);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-opt='{"options":{"title":"Stackoverflow","description":"Website","media":"https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon.png?v=c78bd457575a","url":"https://stackoverflow.com/questions/"}}' >

＆＃13;

＆＃13;

＆＃13;