Question

我们的javascript片段是：

<a href="#" class="n-contact" data-test-socialmedia="{'type': 'facebook', 'options':{'country': 'US' }}">Link</a>

我想检索data-test-socialmedia类型的值。基于此我想添加条件语句来检查data-test-socialmedia类型是否为facebook。因为我们在网站上有很多这样的数据属性。

我尝试了几种方法，并将对象作为值。但我需要在这种情况下的实际价值是facebook。请帮助。

Answer 1

＆＃13;

//first get element
var el = document.getElementsByClassName('n-contact')[0];
//get data and replace single quotes with double quotes to create valid JSON
var d = el.dataset.testSocialmedia.replace(/'/g, '"')
//parse JSON to javascript object
 var parsed = JSON.parse(d, null)
 //get country if type is facebook
 if(parsed.options == 'facebook')
    console.log(parsed.options.country)

＆＃13;

<a href="#" class="n-contact" data-test-socialmedia="{'type': 'facebook', 'options':{'country': 'US' }}">Link</a>

＆＃13;

Answer 2

var str = document.querySelector('.n-contact').getAttribute('data-test-socialmedia').replace(/'/g,'"');    
var obj = JSON.parse(str);
var result = obj.type;
console.log(result);

它会起作用。

Answer 3

使用jQuery

var elementData = $(".n-contact").attr("data-test-socialmedia").replace(/'/g,'"'),
  parsed = JSON.parse(elementData);

console.log(parsed);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="n-contact" data-test-socialmedia="{'type': 'facebook', 'options':{'country': 'US' }}">Link</a>

如何捕获数据属性的值？

3 个答案: