Question

我的JSON数据看起来像这样：

[
{
	"Name": "Fitbit"
	"Category":"App"
}

]

我想在div行的图像上显示数据：

 <div class="row">
    <div class="col-lg-4 col-sm-6 col-xs-12">
        <a href="http://www.amazon.de/Fitbit/b/ref=bl_dp_s_web_1703705031?ie=UTF8&node=1703705031&field-lbr_brands_browse-bin=Fitbit">
             <img src="/img/apps/fitbit.png" class="thumbnail img-responsive">

        </a>
    </div>

最佳做法是什么？ jQuery ajax？

Answer 1

不确定我是否完全理解你的问题，但我会尝试。

您发送数据请求（ajax很好），一旦获得json数据，您可以动态创建div，用json数据填充它，然后将其附加到页面，您的css可以将它放在图片上。看看

Document.createElement();

此处：https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

Answer 2

好吧，首先创建一个容器，将文本放在

中

HTML

<a href="#">
   <img src="http://media.digitalcameraworld.com/wp-content/uploads/sites/123/2012/05/Landscape_photography_tips.foamy_3.jpg" class="thumbnail img-responsive">
   <div id="textImage"></div>
</a>

给出一些风格将它放在图像上

CSS

#textImage{
  position: absolute;
  top: 20px;
  right: 20px;
}

然后，在jQuery中，遍历对象数据并连接一个字符串变量，就像这样

$.each(data, function(){
   for (var property in this) {
    text += property + ": "+ this[property]+"; ";
  }
})

在这种情况下输出为Name: Fitbit; Category: App;，但您可以按照自己喜欢的方式撰写字符串

所以，现在只需将你的字符串附加到div容器中，就是它

$('#textImage').text(text);

请参阅此处的工作示例：FIDDLE

如何将数据从json渲染到div类

2 个答案: