Question

我有一些JSON数据，它们渲染得非常好。

目前，我从我的对象获取超级名称，价格，图片（见截图）。

然而，我需要设计这个样式，使每件连衣裙看起来像这样但水平（屏幕截图）

现在我设法使用JS中的样式标签来设置图像样式以使其成为300px，但是，我对如何设计其余元素的方式一无所知？我使用普通的样式表吗？

这是我的HTML - 正如您所看到的，我只有一个带有id jsonData的div，它包含了所有数据。

npi.group_by(keys).split(values)

这是我的JS

<body>
  <h1>IF YOU LIKE THIS, YOU MIGHT INTERESTED IN THESE</h1>
  <div id="jsonData"></div>
  <script src="app.js"></script>
    <div id="jsonData">
    </div>
</body>

很抱歉，如果这很简单，那我就是渲染JSON的新手。

Answer 1

以类似的方式调整您的代码

var divId = document.getElementById('jsonData');
for(var i=0;i<obj.placements.length;i++) {
  divId.innerHTML += '<div class="block"><span class="name">' + obj.placements[i]['name'];
  divId.innerHTML += '</span>';
  divId.innerHTML += '<span class="price">' + obj.placements[i]['price'];
  divId.innerHTML += '</span>';
  divId.innerHTML += '<img class="image" src="' + obj.placements[i]['imageURL'] + '" style="max-width: 300px" /></div>';
}

之后，您将以这样的格式获得输出

<div class="block">
  <span class="name">OutputName</span>
  <span class="price">OutputPrice</span>
  <img class="image" src="OutputImage">
</div>

稍后通过应用css / less / sass可以轻松地进行视觉调整。

这里是关于如何对齐左侧宽度为300px的方框的示例;

.block {
  widht: 300px;
  float: left;
  padding: 5px;
  border: 1px solid red;

  .price {
    font-weight: bold;
    width: 100%;
  }
}

Answer 2

我可以推荐以下步骤：

首先，您需要将数据放在javascript对象中，以便您可以方便地访问它（使用JSON.parse从JSON字符串中获取对象）。
然后，您可以设置HTML模板，编写相关标签并准备好保存数据。
最后一步，在接收数据的方法中（例如，对服务器的ajax调用的成功回调），使用javascript更新相关html标签中的数据。
请注意，到目前为止，我们讨论过将数据放入HTML中。样式本身将通过CSS完成，就像使用常规静态数据一样。请确保将相关的id /类分配给包含数据的div，以便您可以在CSS中引用它们。例如，产品名称div的.name类等

Answer 3

好朋友！不要使用javascript进行样式化，只需在class标记中添加特定的img属性，或者根据需要更方便地将img标记包含在div内，并将类应用于这些divs。然后你可以用任何你想要的方式使用CSS。

示例：

var divId = document.getElementById('jsonData'); for(var i=0;i<obj.placements.length;i++) { divId.innerHTML += '' + obj.placements[i]['name']; divId.innerHTML += '<br>'; divId.innerHTML += '' + obj.placements[i]['price']; divId.innerHTML += '<br>'; divId.innerHTML += '<img src="' + obj.placements[i]['imageURL'] + '" class='myImage'" /><br />'; }

然后在单独的文件中添加CSS：

.myImage { width: 300px; } //and for selecting any specific element use div:nth-child(2) { background: red; color: black; }

注意：将设计与逻辑和标记分开也是最佳做法。这些天你可以在CSS中实现任何风格。

改变布局 - 我可以用不同的方式设计这个样式

3 个答案: