我使用Meterialize CSS创建卡片。但我想更多地创造它。我将使用JSON和jquery.getJSON()
帮助我为多张卡写html标签。但它没有用。在卡区域是空白的。有人能帮我吗?对不起我的技巧。
var db = {
"card" : [
{"group" : ["class1", "class2"], "image-url" : "images/sample-1.jpg", "card_title" : "Card Title", "card_subtitle" : "Card Subtitle", "badge" : ["hot", "win"], "modal_selector":"#"},
{"group" : ["class1", "class2"], "image-url" : "images/sample-1.jpg", "card_title" : "Card Title", "card_subtitle" : "Card Subtitle", "badge" : ["hot", "win"], "modal_selector":"#"},
{"group" : ["class1", "class2"], "image-url" : "images/sample-1.jpg", "card_title" : "Card Title", "card_subtitle" : "Card Subtitle", "badge" : ["hot", "win"], "modal_selector":"#"}
]
};
$.getJSON(db, function(data){
var i, j, k;
//Loop to write all card element with json. (i is index for card in json.)
for (i in data) {
//Card Placeholder
$('#area').append('<div class="content col s12 m6 l4" >');
//Add class for card placeholder. (j is index for member of group.)
for(j=0; j<data.card[i].group.length; j++) {
$('.content').addClass(data.card[i].group[j]);
}
//Card Image
$('#area').append('<div class="card"><div class="card-image"><img src="' + data.card[i].image_url + '"></div>');
//Card Content
$('#area').append('<div class="card-content">');
//Card Title
$('#area').append('<span class="card-title grey-text text-darken-4">' + data.card[i].title + '</span>');
//Card Subtitle
$('#area').append('<p class="card-subtitle grey-text text-darken-2">' + data.card[i].subtitle + '</p>');
//Card Badge (k is index for member of badge.)
for (k=0; j<data.card[i].badge.length; k++) {
$('#area').append('<span class="badge"></span>')
//Add class for card badge.
$('.badge').addClass(data.card[i].badge[k]);
}
//Card Link to open the modal. But it can't open because i'm not create modal element yet.
$('#area').append('<p><a href="' + data.card[i].modal_selector + '" class="modal-trigger">View More</a></p></div></div></div>')
}
});
header, main, footer { padding-left: 0px; }
.area { background-color: #ccc; border: 3px solid #000; width: 100%; }
.area .card, .card { max-width: 300px; margin-left: auto !important; margin-right: auto !important;}
.area .card .card-content, .card .card-content { padding-top: 1rem; padding-bottom: 1rem; }
.area .card-content .card-title, .card-content .card-title { line-height: 2rem; }
.card-content .card-title { line-height: 2rem !important;}
.card-content .card-subtitle { font-size: 0.875rem; margin-bottom: 0.5rem !important}
.badge.win { font-weight: 300; font-size: 0.8rem; color: #fff; background-color: #26a69a; border-radius: 2px; position: relative; float: right; right: 0rem; max-height: 12px;}
.badge.hot { font-weight: 300; font-size: 0.8rem; color: #fff; background-color: #ef5350; border-radius: 2px; position: relative; float: right; right: 0rem; max-height: 12px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<!--Card Area-->
<p>JSON Card Area:</p>
<div id="area">
</div>
<!--Example-->
<!--Card Placeholder--> <!--Add class for card placeholder.-->
<p>Card Example:</p>
<div class="job-content class1 class2 col s12 m6 l4" >
<div class="card">
<!--Card Image-->
<div class="card-image">
<img src="http://materializecss.com/images/sample-1.jpg">
</div>
<!--Card Content-->
<div class="card-content">
<!--Card Title-->
<span class="card-title grey-text text-darken-4">Card Title</span>
<!--Card Subtitle-->
<p class="card-subtitle grey-text text-darken-2">Card Subtitle</p>
<!--Card Badge--> <!--Add class for card badge.-->
<span class="badge win"></span>
<span class="badge hot"></span>
<!--Card Link to open the modal. But it can't open because i'm not create modal element yet.-->
<p><a href="#modal-selector" class="view-more modal-trigger">View More</a></p>
</div>
</div>
</div>
</main>
答案 0 :(得分:2)
您的代码中存在许多错误,例如错误的for
使用和错误的属性名称,这可能是您的良好起点:
循环遍历db.card
数组并使用项目结果(data
)来创建HTML。
JS:
var db = {
"card": [{
"group": ["class1", "class2"],
"image-url": "images/sample-1.jpg",
"card_title": "Card Title",
"card_subtitle": "Card Subtitle",
"badge": ["hot", "win"],
"modal_selector": "#"
}, {
"group": ["class1", "class2"],
"image-url": "images/sample-1.jpg",
"card_title": "Card Title",
"card_subtitle": "Card Subtitle",
"badge": ["hot", "win"],
"modal_selector": "#"
}, {
"group": ["class1", "class2"],
"image-url": "images/sample-1.jpg",
"card_title": "Card Title",
"card_subtitle": "Card Subtitle",
"badge": ["hot", "win"],
"modal_selector": "#"
}]
};
$.each(db.card, function (key, data) {
//Loop to write all card element with json. (i is index for card in json.)
console.log(data);
$('#area').append('<div class="content col s12 m6 l4" >');
//Card Image
$('#area').append('<div class="card"><div class="card-image"><img src="' + data['image-url'] + '"></div>');
//Card Content
$('#area').append('<div class="card-content">');
//Card Title
$('#area').append('<span class="card-title grey-text text-darken-4">' + data.card_title + '</span>');
//Card Subtitle
$('#area').append('<p class="card-subtitle grey-text text-darken-2">' + data.card_subtitle + '</p>');
});