Question

我是JQuery的新手，需要一些帮助来理解如何构建我的代码......我有一个工作的JSON页面，并且能够让我的代码显示预期的结果。现在我想把这些结果放在标签格式中。基本上我的文章的标题是在标签和下面的文章的正文。我的代码现在显示标签区域中的所有标题，这是正确的，现在我需要将主体放在主要部分。最终结构应如下所示：

<div id="tabs">
   <ul>
       <li><a href="#tabs-1">AAA</a></li>
       <li><a href="#tabs-2">BBB</a></li>
       <li><a href="#tabs-3">CCC</a></li>
   </ul>
   <div id="tabs-1"><h2>AAA</h2><p>This article is about AAA</p></div>
   <div id="tabs-2"><h2>BBB</h2><p>This article is about BBB</p></div>
   <div id="tabs-3"><h2>CCC</h2><p>This article is about CCC</p></div>
</div>

所以，我可以正确显示第一个选项卡区域，但我不知道如何检索第二组数据（文章的div） - 我尝试复制函数searchcallback代码并重命名它，我试过复制整个查询，但都没有奏效。我知道由于我的经验不足，我只是错过了一些东西。有人能告诉我构造代码的正确方法吗？我真的想学习这个，我做了很多阅读但还没有完全理解......我的脚本在下面，JSON数组结构在下面。谢谢。

<script>
var jsonURL = "//www.myurl.com/api.php?columns = id_cr, title, teaser & order = title & page = 1 ";
jQuery(document).ready(function() {
    jQuery.ajax({
        url: jsonURL,
        success: searchCallback
    });
});

function searchCallback(data) {
    var content_data = data.content_data.records;
    jQuery.each(content_data, function(index, content_dat) {
        jQuery(".tabs").append('<li><a href="#tabs-' + content_dat[0] + '">' + content_dat[2] + '</a></li>');
    });
};
</script>


<div id="tabs">
  <ul>
    <div class="tabs"></div>
  </ul>
  <div class="body"></div>
</div>

content_data    
 columns    
  0 "id_cr"
  1 "teaser"
  2 "title"
 records    
  0 
   0    "1"
   1    "This article is about AAA"
   2    "AAA"
  1 
   0    "2"
   1    "This article is about BBB"
   2    "BBB"
  3 
   0    "3"
   1    "This article is about CCC"
   2    "CCC"
 results    3

Answer 1

试试这段代码。它是未经测试的，因为我没有你的api url。

我从ul中删除了类标签（类和id同名风格不好，你不需要它。）
对于JQUERY UI TABS，您需要在ul中为选项卡本身插入一个插入，并在ul之后为选项卡的内容添加另一个插入。 <li><a href="#tabs-1">tabname</a><li> <div id="tabs-1">content</div>

您的content_dat [0]不需要，因为索引已经存在

<script>
    var jsonURL = "http://www.myurl.com/api.php/content_data?columns=id_cr,title,teaser&order=title&page=1";
        jQuery(document).ready(function() {
            jQuery.ajax({
                url: jsonURL,
                success: searchCallback
            });
        });
        function searchCallback(data) {
            var content_data = data.content_data.records;
            jQuery.each(content_data, function(index, content_dat) {
                jQuery("#tabs ul").append('<li><a href="#tabs-'+index+'">' + content_dat[2] + '</a></li>');
                jQuery("#tabs ul").after("<div id='tabs-"+index+"'>"+content_dat[1]+"</div>");
            });
        };
    </script>

    <div id="tabs">
        <ul>
        </ul>
    </div>

Jquery JSON和标签

1 个答案: