Я пытаюсь отобразить изображение из своих данных JSON в HTML, но я не добился успеха.
У меня есть маркер, который отображает некоторый контент, когда происходит событие 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.
Спасибо за ваше время!
for..in
цикл не требуется. Если вы ожидаете, что элемент <img>
будет визуализирован, json.Hatch[0].image
<img>
с параметром src
в json.Hatch[0].image
в строке, переданной в .html()
$(".marker.one").on("click", function() {
if (!$("#show img").is("*"))
$("#show").html(
"Image : <img src=" + json.Hatch[0].image + ">"
+ "| Description : " + json.Hatch[0].description
);
});
.marker
, вы можете использовать.index()
чтобы получить индекс элемента в коллекции.marker
, который должен соответствовать элементу N в массиве.