Question

我的代码

function get_projects() {
 $.ajax ({
   url: "get_projects.php",
   type: "post",
   dataType: "json",
   data: {value : $("#search_term").val()},
   success: function(store) {   
     var a = 0;
     var b = 0;

     $("#testdiv").empty();             
     var content = '';                                      
     $.each(store, function(i, data) {
       a = a + 1;
       content += '<div id="tabs'+[i]+'">';
       content += '<ul>';       
       content += //.... a bunch of tab headings    
       content += '</ul>';
       content += '<div id="ui-tabs-'+(a+b)+'">';
       // ... some tab content 

       content += '</div>';
       content += '<div id="ui-tabs-'+(a+1+b)+'">';
       // ... some tab content for each tab up to 

       content += '<div id="ui-tabs-'+(a+5+b)+'">';
       // ... some tab content 
       content += '</div>'; 
       content += '</div>';
       b = b + 5;       
       });

     $("#testdiv").append(content);

     $("#tabs0").tabs(); 
     $("#tabs1").tabs(); 
     $("#tabs2").tabs(); 
     .... same thing for a bunch of other possible tabs up to #tabs20

简短说明

search_term可以生成多个projects，每个项目都有6个标签。因此，每次提交搜索词时，页面都会重新绘制新项目及其信息标签

问题

第一次将html注入页面时一切都很好。

生成的div id ui-tabs-#与我使用(a+...+b)计数器创建的div ID匹配。

然而，在每个后续请求中，自动生成的div id号正在累积，而不是从零开始。所以我的(a+...+b)计数器正在生成不匹配的div id。因此，选项卡内容位于选项卡容器之外

我在.tabs("destroy")循环内外的.tabs("remove")和个人$("#testdiv")尝试了$("#tabs0")和$.each()

我似乎无法解决这个问题

任何帮助和建议都会很棒

Answer 1

通过将变量a和b移到ajax函数之外来解决它，这样它们就不会在每个循环中重置为0

 var a = 0;
 var b = 0;

function get_projects() {
 $.ajax ({
    url: "get_projects.php",
    type: "post",
    dataType: "json",
    data: {value : $("#search_term").val()},
    success: function(store) {   

 $("#testdiv").empty();             
 var content = '';                                      
 $.each(store, function(i, data) {
   a = a + 1;
   content += '<div id="tabs'+[i]+'">';
   content += '<ul>';       
   content += //.... a bunch of tab headings    
   content += '</ul>';
   content += '<div id="ui-tabs-'+(a+b)+'">';
   // ... some tab content 

   content += '</div>';
   content += '<div id="ui-tabs-'+(a+1+b)+'">';
   // ... some tab content for each tab up to 

   content += '<div id="ui-tabs-'+(a+5+b)+'">';
   // ... some tab content 
   content += '</div>'; 
   content += '</div>';
   b = b + 5;       
   });

 $("#testdiv").append(content);

 $("#tabs0").tabs(); 
 $("#tabs1").tabs(); 
 $("#tabs2").tabs(); 
 .... same thing for a bunch of other possible tabs up to #tabs20

动态加载选项卡时重置ui-tabs ID号

1 个答案: