Question

我试图用HTML中的JSON数据显示图像，但我没有取得任何成功。

我有一个标记，当发生onclick事件时会显示一些内容。

为此，我使用以下JSON代码：

var json = {
"Hatch": [
    {
        "image": "img/myimage.jpg",
        "description": "test goes here"
    }
]
}

 $(document).ready(function(){
for( index in json.Hatch )



$('.marker.one').on('click', function(){
$('#show').html(   'Image : ' +json.Hatch[index].image + '| Description : ' + json.Hatch[index].description  );

});
});

我从html点击的触发器如下：

<section class="info">

    <div class="container-fluid">
      <div class="row">

      <div class="marker one">

         <img  class="trigger" src="img/marker.png">

      </div>

      <div class="marker two">
         <img  class="trigger" src="img/tooltip.png">

      </div>


      </div>
</section>

显示在这里：

<div id="show"></div>

您提供的任何帮助都会很棒！我开始只使用JSON。

谢谢你的时间！

Answer 1

for..in循环不是必需的。如果您希望呈现<img>元素，请将<img>的{{1}}设置为传递给src的字符串中的json.Hatch[0].image

.html()

在html中显示来自json数据的图像？

1 个答案: