Question

大家好我正在尝试从JSON文件加载数据，我想用它作为每个块的背景来获取fitch

所以块是一个盒子，每个盒子有4个小盒子，我想针对这4个盒子，并根据JSON文件数据更改背景颜色

这是我使用的JSON格式

[
  {
  "name" : "color1" ,
  "box1" : "#7f6ded" ,
  "box2" : "#343434" ,
  "box3" : "#ffffff" ,
  "box4" : "#858585"
  } ,
  {
  "name" : "color2" ,
  "box1" : "#58c9b9" ,
  "box2" : "#343434" ,
  "box3" : "#ffffff" ,
  "box4" : "#9dc8c8"
  }
]

这里是调用jq

$(function () {

  // start calling colors
  $.getJSON( "js/colors.json", function( data ) {

    // console.log(data[1].box1);
    var output = "";
    var output2 = "";
    for (var i = 0; i < data.length; i++) {

      output +=
                "<div class=" + "col-md-4" + ">" +
                "<div class=" + "co-palet" + ">" +
                "<div class=" + "box box-1" + "></div>" +
                "<div class=" + "box box-2" + "></div>" +
                "<div class=" + "box box-3" + "></div>" +
                "<div class=" + "box box-4" + "></div>"
                + "</div>" + "</div>"

      $('#myColors').html(output);      
    };

  });
  // end calling colors



});

我输出到

<div id="myColors"></div>

任何帮助将不胜感激:)

Answer 1

var arr = [
  {
    "name" : "color1" ,
    "box1" : "#7f6ded" ,
    "box2" : "#343434" ,
    "box3" : "#ffffff" ,
    "box4" : "#858585"
  },
  {
    "name" : "color2" ,
    "box1" : "#58c9b9" ,
    "box2" : "#343434" ,
    "box3" : "#ffffff" ,
    "box4" : "#9dc8c8"
  }
];

var output = '',
    colors = '';

$.each(arr, function(index, value) {
  var colorID = '#' + value.name + ' ';

  output += '<div class="col-md-4">\
<div class="col-palet" id="' + value.name + '">';

  $.each(value, function(i, v) {
    output += (i != 'name') ? '<div class="box ' + i + '"></div>' : '';
    colors += (i != 'name') ? colorID + '.' + i + ' {background:' + v + '}\n': '';
  });

  output += '</div></div>';
});

$('#myColors').html(output);
$('#stylus').text(colors);

.box {
  width: 100px;
  height: 100px;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="stylus"></style>
<div id="myColors"></div>

Answer 2

您可以访问json对象，然后传递颜色而不是传递类：

$.getJSON( "js/colors.json", function( data ) {

// console.log(data[1].box1);
var output = "";
var output2 = "";

for（var i = 0; i＆lt; data.length; i ++）{

                output +=
                    '<div class="col-md-4">' +
                    '<div class="co-palet">' +
                    '<div class = "box" style = "background :' + 
                     data[0].box1 + '"></div>' +
                    '<div class = "box" style = "background :' + 
                     data[0].box2 + '"></div>' +
                    '<div class = "box" style = "background :' + 
                     data[0].box3 + '"></div>' +
                    '<div class = "box" style = "background :' + 
                     data[0].box4 + '"></div>' +
                    + '</div></div>';

              $('#myColors').html(output);      
            };

}）;

如果您更喜欢使用双引号来构建字符串，可能会尝试转义您希望在字符串中使用的双引号，例如\“this。

此致

Answer 3

只需在您的框中添加样式属性即可。

$.getJSON( "js/colors.json", function( data ) {

  var output = "";
  for (var i = 0; i < data.length; i++) {

    output +=
            "<div class=\"col-md-4\">" +
            "<div class=\"co-palet\">" +
            "<div class=\"box box-1\" style=\"background-color:" + data[i].box1 + "\"></div>" +
            "<div class=\"box box-2\" style=\"background-color:" + data[i].box2 + "\"></div>" +
            "<div class=\"box box-3\" style=\"background-color:" + data[i].box3 + "\"></div>" +
            "<div class=\"box box-4\" style=\"background-color:" + data[i].box4 + "\"></div>"
            + "</div>" + "</div>";

  };
  $('#myColors').html(output); //move this outside the loop so it isn't overwritten every time
});

另外，请务必妥善转义您的报价。

Answer 4

如果您使用的是jQuery，也可以使用$.each方法获得更好的性能。希望这有帮助！

$(document).ready(function () {

$.getJSON( "datos.json", function( data ) {

    var output = "";
    $.each(data, function (val, ob) {
        output +=
            "<div class=\"col-md-4\">" +
            "<div class=\"co-palet\">" +
            "<div class=\"box box-1\" style=\"background-color:" + ob.box1 + "\">"+ ob.box1+"</div>" +
            "<div class=\"box box-2\" style=\"background-color:" + ob.box2 + "\">"+ ob.box2+"</div>" +
            "<div class=\"box box-3\" style=\"background-color:" + ob.box3 + "\">"+ ob.box3+"</div>" +
            "<div class=\"box box-4\" style=\"background-color:" + ob.box4 + "\">"+ ob.box4+"</div>"
            + "</div>" + "</div>";
    });

    $('#myColors').html(output);
});
// end calling colors
});

如何从JSON文件加载特定数据作为颜色

4 个答案: