我有一个Handlebars模板,可以在.people
div中呈现图片。 From a previous question,我无法弄清楚如何在每个人的照片旁边显示工具提示。经过数小时的反复试验,我通过将我直接写入的工具提示脚本直接放入模板中找到了解决方案。现在,我在模板中为每个.people
div显示了一个工具提示。
<script id="apalachee-template" type="text/x-handlebars-template">
<h2>Place</h2>
{{#place}}
<h5>{{year}}</h5>
{{#people}}
<div class="people">
<img src="{{ pic }}">
<p>{{name}}</p>
</div>
<div class="box">
<h4>{{ name }}</h4>
</div>
{{/people}}
{{/place}}
<script>
jQuery(document).ready(function(e){function t(t){e(".box").show()}function n(t){e(".box").hide()}function r(t){e(".box").css("left",t.pageX-50+"px");e(".box").css("top",t.pageY-85+"px")}e(".people").on("mouseover",t);e(".people").on("mouseout",n);e(".people").on("mousemove",r)})
<{{!}}/script>
</script>
但乐趣并没有止步于此。现在,我正努力将我的JSON文件中的数据放入我的.box
div中,这是我的工具提示。以下是我正在使用的JSON。
{
"place": [
{
"year": "2011",
"people": [
{
"name": "Ronald",
"dob": "12/12/55"
},
{
"name": "Warren",
"dob": "8/22/57"
},
{
"name": "Miguel",
"dob": "9/29/61"
}
]
},
{
"year": "2012",
"people": [
{
"name": "Bruce",
"dob": "3/24/68"
}
]
},
{
"year": "2014",
"people": [
{
"name": "Rayon",
"dob": "12/12/79"
},
{
"name": "James",
"dob": "1/30/48"
}
]
}
]
}
我想要做的是分开数据,以便当有人将鼠标悬停在Rayon的照片上时,它会显示在工具提示(.box
div)中。我有它只有一些数据出现,并混杂到工具提示。 。我的预感是我没有正确格式化模板来显示数据。