Question

的Javascript

$(function() {
   var dmJSON = "clues.json";
   $.getJSON( dmJSON, function(data) {
      var idx=1;
      $.each(data.details, function(i, f) {
          var myid = 'mypop'+String(idx);
          idx++;
          var $popup="<popup id='"+myid+"' class='mystyles1'><tr>" + "<p>" + f.Myclue + "</p></tr>" + "<tr><p>" + f.Description + "</p></tr>" + "<tr><p>" + f.Updates + "</p></tr>" + "<tr><p> " + f.Users + "</p></tr>" + "&nbsp;&nbsp;&nbsp;</popup>"
          $("#popup-container").append($popup)
      });
   });
});

HTML

<div id="popup-box" class="popup-position">
    <div id="popup-wrapper">
        <p style="text-align: right;"><a href="javascript:void(0)" onclick="toggle_visibility('popup-box');">X</a></p>
         <div id="popup-container"></div>
    </div>
</div>

使用此代码，我试图在弹出窗口中显示我的json数据。

JSON

{
"details": [
  {
    "Myclue" : "First Clue",
    "Description" : "Answer to the first clue",
    "Updates" : "Rejected",
    "Users" : "10"
  },
  {
    "Myclue" : "Second Clue",
    "Description" : "Answer to the second clue",
    "Updates" : "Amazing",
    "Users" : "15"
  },
    {
    "Myclue" : "Third Clue",
    "Description" : "Answer to the third clue",
    "Updates" : "Spectacular",
    "Users" : "10"
  },
    {
    "Myclue" : "Fourth Clue",
    "Description" : "Answer to the fourth clue",
    "Updates" : "Rejected",
    "Users" : "10"
  },
    {
    "Myclue" : "Fifth Clue",
    "Description" : "Answer to the fifth clue",
    "Updates" : "Rejected",
    "Users" : "10"
  },
    {
    "Myclue" : "Sixth Clue",
    "Description" : "Answer to the sixth clue",
    "Updates" : "Rejected",
    "Users" : "10"
  },
    {
    "Myclue" : "Seventh Clue",
    "Description" : "Answer to the seventh clue",
    "Updates" : "Rejected",
    "Users" : "10"
  },
    {
    "Myclue" : "Eigth Clue",
    "Description" : "Answer to the eigth clue",
    "Updates" : "Rejected",
    "Users" : "10"
  },
    {
    "Myclue" : "Nintht Clue",
    "Description" : "Answer to the ninth clue",
    "Updates" : "Rejected",
    "Users" : "10"
  },
    {
    "Myclue" : "Tenth Clue",
    "Description" : "Answer to the ninth clue",
    "Updates" : "Rejected",
    "Users" : "10"
  }
]
}

但问题是整个数据显示在一个弹出窗口中。但我想要实现的是，我希望每组数据都以不同的弹出方式显示。例如：这组数据应该在一个弹出窗口中显示

{
    "Myclue" : "First Clue",
    "Description" : "Answer to the first clue",
    "Updates" : "Rejected",
    "Users" : "10"
  },

然后，第二个设置在另一个弹出窗口

{
    "Myclue" : "Second Clue",
    "Description" : "Answer to the second clue",
    "Updates" : "Amazing",
    "Users" : "15"
  },

.....等等。我不知道我的错误是什么，因为当点击一个表并且我的表是动态创建时弹出窗口出现。请帮我解决这个问题。

Answer 1

每组数据都以不同的弹出方式显示。唯一的问题是每个人都有相同的身份，autoconf-2.61-MSYS-1.0.11-1.tar.bz2 automake-1.10-MSYS-1.0.11-1.tar.bz2 libtool1.5-1.5.25a-20070701-MSYS-1.0.11-1.tar.bz2。您可以使用以下内容来提供唯一ID

mypop1

通过检查元素

Demo您可以看到每个$(function() { var dmJSON = "clues.json"; $.getJSON( dmJSON, function(data) { $.each(data.details, function(i, f) { var myid = 'mypop'+ (i+1); // if you want to start id's from '1' var $popup="<popup id='"+myid+"' class='mystyles1'><tr>" + "" + f.Myclue + "</tr>" + "<tr>" + f.Description + "</tr>" + "<tr>" + f.Updates + "</tr>" + "<tr> " + f.Users + "</tr>" + "   </popup>" $("#popup-container").append($popup) }); }); });对象位于不同的data

在弹出窗口

1 个答案: