Popover不适用于json多个值

这是我的json文件。当我将鼠标悬停在“info.name”[abc、def、ghi]上时，弹出窗口将显示“name”、“size”和“used”

但我的问题是“abc”是第一个值，当我将鼠标移到它上面时，它会按预期显示值。但当我将鼠标移到“def”和“ghi”上时，什么也没发生：（

请查看我的两个屏幕截图以了解问题。在第一个屏幕中，我获取所有json信息值“abc”、“def”和“ghi”。在第二个屏幕截图中，如果我将鼠标悬停在上面，我获取的是“abc”值。但是“def”和“ghi”值根本没有显示。我不明白问题是什么：（

我还需要强调“def”和“ghi”的值。但我认为我的逻辑有问题。提前谢谢。这对我来说是一个非常罕见的问题，可能其他人也会这样

如果我使用类而不是id，以下是屏幕截图：(

---

现在，如果您尝试调用每个对象，它应该可以工作

   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');   

            },

---

您需要在此处更改两件事。首先，是使用类来定义Popover，而不是id。第二是将每个

抽象到其自己的视图中。当前，您有一个视图循环整个集合。您的所有事件当前都绑定到这一个视图。执行我提到的这些操作将修复此问题ue

你可以这样做，让它成为自己的视图，其中包含自己的子元素。只是写得很快，还没有测试过，但想法是这样的。我不确定你使用的是哪个popover库，但想法大体相同

---

编辑：没有意识到你使用的是胡须/把手，所以这是JS小提琴。

问题是

id

应该是唯一的，而你违反了这个规则。你的所有id都应该改为class。尝试class而不是id来获得多个值。如果我使用class“它会显示一些我现在在屏幕截图上看到的东西：）哦，如果你使用类，你会得到相同的popOver3次，奇怪。一些逻辑mistake@nhahtdh：现在似乎更复杂了：（如果你提供的任何例子对我和其他人都有很大帮助的话。我编辑了我的回复，以提供我建议的原型。这很好：）我使用bootstarp。

<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>

   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');   

            },

 var abc =
 {
     "id"  : 1,
"name"  : "clevin",
"description" : "Version 1 : some desc",
"info" : {
  "id"  : 2,
  "name"  : "abc",
  "size"  : "5 GB",
  "used"  : "25%"
}
 };

 var def = 
 {
     "id"  : 3,
  "name"  : "def",
  "size"  : "10 GB",
  "used"  : "15%"
};
var ghi = {
  "id"  : 4,
  "name"  : "ghi",
  "size"  : "20 GB",
  "used"  : "5%"
};

var output = 
{
    show : function()
    {
        return abc["info"];
    }
};

console.log(output.show());