我尝试在json属性中设置一些dataset数据。
HTML看起来像<div data-switch="true" data-json="{'key1': 'value 1'}, {'key2': 'value 2'}">
data-json中的数据我用JavaScript以这种方式获取数据：
json = $("[data-json]").data("json").toString();
json = JSON.stringify(json);
无论我尝试什么，它都不会将其转换为object。它只返回string
使用toString()和stringify()
$(function() {
json = $("[data-json]").data("json").toString();
json = JSON.stringify(json);
json = JSON.parse(json);
console.log(json);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-json="{'key1': 'value 1'}, {'key2', 'value 2'}">
</div>
当我删除toString()和stringify()函数时，会出现以下错误：
Uncaught SyntaxError: Unexpected token ' in JSON at position 1
没有toString()和stringify()
$(function() {
json = $("[data-json]").data("json");
json = JSON.parse(json);
console.log(json);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-json="{'key1': 'value 1'}, {'key2', 'value 2'}">
</div>
摆弄原始JavaScript和HTML
/**
* Switch content inside Metro UI blocks
*
* @requires {data-switch} Set data-switch="true" inside the dom
*/
$(function() {
/**
* Get all switch elements
*/
var switches = $("[data-switch]");
/**
* Sample data for each switch element
var switches_data = {
0: {
0: {
image: 'https://cdn.elegantthemes.com/blog/wp-content/uploads/2016/02/rules-good-ui-design-web-project-thumbnail.png',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
1: {
image: 'http://www.fujitsu.com/fts/Images/28618-workplace-manager580x224_tcm21-1830661.jpg',
content: 'Aliquam interdum sit amet nibh aliquet accumsan.'
},
2: {
image: 'http://cdn.moneycrashers.com/wp-content/uploads/2013/03/manager2.jpg',
content: 'Vestibulum sed metus eu justo sagittis congue.'
}
},
1: {
0: {
image: 'https://cdn.elegantthemes.com/blog/wp-content/uploads/2016/02/rules-good-ui-design-web-project-thumbnail.png',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
1: {
image: 'http://www.fujitsu.com/fts/Images/28618-workplace-manager580x224_tcm21-1830661.jpg',
content: 'Aliquam interdum sit amet nibh aliquet accumsan.'
},
2: {
image: 'http://cdn.moneycrashers.com/wp-content/uploads/2013/03/manager2.jpg',
content: 'Vestibulum sed metus eu justo sagittis congue.'
}
},
2: {
0: {
image: 'https://cdn.elegantthemes.com/blog/wp-content/uploads/2016/02/rules-good-ui-design-web-project-thumbnail.png',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},
1: {
image: 'http://www.fujitsu.com/fts/Images/28618-workplace-manager580x224_tcm21-1830661.jpg',
content: 'Aliquam interdum sit amet nibh aliquet accumsan.'
},
2: {
image: 'http://cdn.moneycrashers.com/wp-content/uploads/2013/03/manager2.jpg',
content: 'Vestibulum sed metus eu justo sagittis congue.'
}
}
};
*/
/**
* Check if elements exists
*/
if(switches.length > 0) {
/**
* Loop through objects
*
* @var c Object Key
* @var e Object Value
*/
$.each(switches, function(c, e) {
/**
* Get switches data current object
*/
var switches_data = $(this).data("switches");
console.log(switches_data);
/**
* Get next div
*/
var next = $(this).children().first()[0];
next = $(next);
/**
* Set type animation
*/
var animation = "flipInX";
/**
* Set index where to start from
*/
var index = 0;
/**
* Generate interval seconds, a random number so they will never be the same
*/
var x = Math.floor((Math.random() * 6000) + 3000);
/**
* Loop through switches
*
* @var i Object Key
* @var b Object Value
*/
$.each(switches_data, function(i, b) {
/**
* Create new element for each switches
*/
var el = $("<div />").attr({class: "metro-ui-column-content animated", id: "content-column-" + i});
/**
* Append el to next element, previous defined
*/
el.appendTo(next);
/**
* Set background image for el
*/
el.css({
"background": "url("+ b.image +") no-repeat",
"background-size": "cover"
});
/**
* Append html content
*/
el.html( "<div class=\"metro-ui-column-html\">" + b.content + "</div>");
});
/**
* Set static this
*/
var self = $(this);
/**
* Find all animated object
*/
var animated = $(this).find(".animated");
/**
* Generate random number between 2000 and 4000, it acts as seconds for interval
*/
var x = Math.floor((Math.random() * 8000) + 4000);
/**
* Loop through animated objects
*
* @var i Object Key
* @var e Object Value
*/
$.each(animated, function(i, e) {
/**
* Start with the first animated object in the current loop
*/
if(i === 0) {
/**
* Start with an timeout with random generated content, so no content will ever be loaded at the same time
*/
setTimeout(function() {
/**
* Gets visible by setting the z-index
*/
$(e).css("z-index", 2).addClass("flipInX");
}, x);
}
});
/**
* Set new index higher than first object
*/
var index = 3 ;
/**
* Set interval function to start looping the animation
*/
setInterval(function() {
/**
* Get next object from current object
*/
var next = self.find(".flipInX").next();
/**
* If there is no next object reset to first object
*/
if(next.length === 0) {
/**
* Update next to first object cause next doenst exist
*/
var next = self.find(".animated").first();
}
/**
* Set new index and add animation class
*/
next.css("z-index", index++).addClass("flipInX").siblings().removeClass("flipInX");
}, x);
});
}
});@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
body {
background-color: #f1f1f1;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
* {
box-sizing: border-box;
}
/* Metro theme UI */
.metro-theme-ui {
max-width: 450px;
margin: 40px auto;
height: 250px;
}
.metro-ui-row {
position: relative;
width: 100%;
min-height: 1px;
/* Fix breaking when height is 0 */
}
.metro-ui-row:after,
.metro-ui-row:before {
display: table;
content: " ";
clear: both;
}
.metro-ui-column {
position: relative;
background: #12A7CC;
padding: 50px;
box-shadow: 1px 1px 2px #ccc;
overflow: hidden;
}
.metro-ui-column.fadeIn {
animation: fadeIn .33s ease;
}
.metro-ui-column.fadeOut {
animation: fadeOut .33s ease;
}
.metro-ui-column .metro-ui-column-content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.metro-ui-column .metro-ui-column-html {
background: rgba(0, 0, 0, 0.5);
position: absolute;
color: #fff;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 10px;
}
/* Calculate column width */
.metro-ui-col {
padding: 2px;
float: left;
}
.metro-ui-col-10 {
width: calc(100%);
}
.metro-ui-col-9 {
width: calc(11.11111111%);
}
.metro-ui-col-8 {
width: calc(12.5%);
}
.metro-ui-col-7 {
width: calc(14.28571429%);
}
.metro-ui-col-6 {
width: calc(16.66666667%);
}
.metro-ui-col-5 {
width: calc(20%);
}
.metro-ui-col-4 {
width: calc(25%);
}
.metro-ui-col-3 {
width: calc(33.33333333%);
}
.metro-ui-col-2 {
width: calc(50%);
}
.metro-ui-col-1 {
width: calc(100%);
}
/* Keyframes */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
@keyframes flipInX {
from {
left: -100%;
}
to {
left: 0;
}
}
.metro-ui-column .metro-ui-column-content.flipInX {
-webkit-animation-name: flipInX;
animation-name: flipInX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
transform: perspective(400px) rotate3d(1, 0, 0, 0deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
backface-visibility: visible !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="metro-theme-ui">
<div class="metro-ui-row">
<div class="metro-ui-col metro-ui-col-10">
<div class="metro-ui-column"></div>
</div>
</div>
<div class="metro-ui-row">
<div class="metro-ui-col metro-ui-col-3" data-switch="true" data-switches='{"image": "https://cdn.elegantthemes.com/blog/wp-content/uploads/2016/02/rules-good-ui-design-web-project-thumbnail.png", "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."}, { "image": "http://www.fujitsu.com/fts/Images/28618-workplace-manager580x224_tcm21-1830661.jpg", "content": "Aliquam interdum sit amet nibh aliquet accumsan."}, { "image": "http://cdn.moneycrashers.com/wp-content/uploads/2013/03/manager2.jpg", "content": "Vestibulum sed metus eu justo sagittis congue." }'">
<div class="metro-ui-column"></div>
</div>
<div class="metro-ui-col metro-ui-col-3">
<div class="metro-ui-column"></div>
</div>
<div class="metro-ui-col metro-ui-col-3">
<div class="metro-ui-column"></div>
</div>
</div>
<div class="metro-ui-row">
<div class="metro-ui-col metro-ui-col-3">
<div class="metro-ui-column"></div>
</div>
<div class="metro-ui-col metro-ui-col-3">
<div class="metro-ui-column"></div>
</div>
<div class="metro-ui-col metro-ui-col-3">
<div class="metro-ui-column"></div>
</div>
</div>
</div>