Jquery JSON和標籤

我是JQuery的新手，需要一些幫助來理解如何構建我的代碼......我有一個工作的JSON頁面，並且能夠讓我的代碼顯示預期的結果。現在我想把這些結果以標籤格式。基本上我的文章的標題是在標籤和下面的文章的主體。我的代碼現在顯示了標籤區域中的所有標題，這是正確的，現在我需要在主要部分中獲取主體。最終的結構應該是這樣的：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

來源

2017-09-16 user1255154

你描述結尾處的內容是不是在JavaScript格式。你可以重新格式化它，使其明確嗎？ – trincot

請提供JSON響應，最後您的代碼不好。 – skobaljic

是的，最後的JSON代碼只是它如何佈置的一個樣本 - 它不是我不想發佈的實際數據。我的JSON驗證，我沒有檢索數據的麻煩。我的問題是關於如何構造Jquery中的選項卡......如何爲選項卡式部分檢索一組數據，然後爲身體部分設置另一個版本......謝謝:) – user1255154

試試這段代碼。它沒有經過測試，因爲我沒有你的API網址。

我從UL 標籤刪除類（class和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>

來源

2017-09-16 21:44:15

謝謝你，代碼工作和你的解釋是非常有幫助的。我很感激：） – user1255154

Jquery JSON和標籤

回答

相關問題