[
{
"id" : 1,
"name" : "clevin",
"description" : "Version 1 : some desc",
"info" : [{
"id" : 2,
"name" : "abc",
"size" : "5 GB",
"used" : "25%"
},
{
"id" : 3,
"name" : "def",
"size" : "10 GB",
"used" : "15%"
},
{
"id" : 4,
"name" : "ghi",
"size" : "20 GB",
"used" : "5%"
}],
}]
这是我的 json 文件。当我将鼠标悬停在“info.name”[abc, def, ghi] 上时,弹出框将显示“name”、“size”和“used”。
但我的问题是“abc”是第一个值,当我将鼠标悬停时它会按预期显示值。但是当我将鼠标悬停在“def”和“ghi”上时,什么都没有发生:(。
<ul type="none">
<li>
<label id="vol-label" class="muted">Info :</label>
{{#info}}
<span id="value"><a><u>{{name}}</u></a></span>
<span id="info-popover-title" class="hide">{{name}}</span>
<div id="info-popover-content" class="hide">
<p>Size : {{size}}</p> <p> Used : {{used}}</p><p> Status : {{status}}</p>
</div>
{{/info}}
</li>
</ul>
这是我的模板(小胡子)。以下是我的观点部分(backbone.js)
events: {
"mouseenter #value" : "showDetails",
"mouseleave #value" : "hideDetails" ,
},
showDetails : function() {
this.$("#value").popover({
html : true,
title: function() {
return $("#info-popover-title").html();
},
content: function() {
return $("#info-popover-content").html();
}
});
this.$("#value").popover('show');
},
hideDetails : function() {
this.$("#value").popover('hide');
},
请查看我的两个屏幕截图以了解该问题。在第一个屏幕热看到我得到所有 json 信息值 "abc" "def" 和 "ghi" 。在第二个屏幕截图中,如果我将鼠标悬停在“abc”值上。但是“def”和“ghi”值根本没有显示。我不知道是什么问题:(。
我还需要弹出“def”和“ghi”值。但我认为我的逻辑有问题。提前致谢。这对我来说真的是一个罕见的问题,可能其他人也一样。
如果我使用 id 的类 insted 以下是屏幕截图:(