如何捕獲數據屬性的值？

Question

JavaScript代碼段，我們已經是：

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

我想檢索數據測試，社會化媒體類型的值。基於此，我想添加條件語句來檢查data-test-socialmedia類型是否爲Facebook。因爲我們在網站中有許多像這樣的數據屬性。

我嘗試了幾種方法，並將對象作爲值。但我需要在這種情況下的實際價值，它是Facebook。請幫助。

Answer 1

使用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>

Answer 2

//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)

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

Answer 3

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

它會工作。