Question

我希望在我的网站上放置一个div，其内容根据clicked的链接而变化而不刷新。放在那里的内容来自MySQL database，它放在JSON中。我的问题是单击链接时无法显示JSON数据。

这是我正在使用的脚本：

$(document).ready(function () {
   $.getJSON("jsondata.php",rightSideData);
   function rightSideData(data) {
      for(var i=0; i<data.length;i++) {
         $("#changetext"+data[i].id).click(function() {
            $("#rightside").html("<h1>" + data[i].title + "</h1><p />" + data[i].content);
         });
      }
   }
});

这是必须更改的div元素：

<div class='rightside' id='rightside'>Test</div>

链接以这种方式构建：

echo "<a id='changetext" . $row['id'] . "'> ";
echo "<div class='tile'>";
echo "<h2>Tile</h2></div></a>";

我已经测试了不同的元素，它们工作正常（使用硬编码数据更改div内容，显示JSON数据），但我很难弄清楚为什么组合的东西没有用。

Answer 1

对象没有长度，使用$.each来代替它，除非它实际上是一个包含对象的数组：

$(document).ready(function () {
   $.getJSON("jsondata.php",rightSideData);

   function rightSideData(data) {
      $.each(data, function(i, d) {
         $("#changetext" + d.id).on('click', function() {
             var h1 = $('<h1 />', {text : d.title}),
                 p  = $('<p />', {text : d.content});
             $("#rightside").html(h1.add(p));
         });
      });
   }
});

Answer 2

问题是i var在循环结束时将是data.length，这就是点击处理程序将看到的内容。

使用jquery创建动态div内容

2 个答案: