Question

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

Answer 1

您的代码中存在许多错误，例如错误的for使用和错误的属性名称，这可能是您的良好起点：

JSFiddle

循环遍历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>');

});

如何使用jquery.getjson（）编写多个实现css卡

1 个答案: