Question

我正在尝试基于我的数据集实现动态嵌套选项卡。我能够成功实现父选项卡但是有子选项卡问题。代码

$(document).ready(function() {
var data1 = [["FINANCE"],["SALE"],["SALE3"]];
var data2=[["FINANCE","FINANCE1"],["FINANCE","FINANCE2"],["SALE","SALE1"],["SALE","SALE2"],["SALE","SALE3"],["SALE","SALE4"],["SALE3","NOSALE"]]
 var stringData = "";
var dyn_div="";
var dyn_ul="";
var dyn_li='';
for (var i = 0; i < data1.length; i++) {
  stringData = "<li><a data-toggle='tab'  href=#"+data1[i]+">"+data1[i]+"</a></li>"
  $(".list").append(stringData);
  $(".list li:first-child").addClass("active");
  dyn_div="<div class='tab-pane fade' id="+data1[i]+">'<ul class='p nav nav-tabs'>";
for(var j=i;j< data2.length;j++)
{    
      if(data2[j][0]==data1[i]){

        dyn_li= "<li><a data-toggle='tab'  href=#"+data2[j][1]+">"+data2[j][1]+"</a></li>" 
         $(".p").append(dyn_li);
       dyn_div +='</ul></div>';
          $(".tab-content").append(dyn_div);
          }
          else
          {
          dyn_li=''
           $(".p").append('');
          }

             } 
 }
 $(".p li:first-child").addClass("active");
 $(".tab-content div.tab-pane:first-child").addClass("active in");
 })

HTML代码

<ul class="list nav nav-tabs"></ul>
<div class="tab-content"></div>

OUTPUT

我无法理解我在做什么。“财务”标签只有像Finance1这样的金融子，财务和销售标签只有SALE子标签。任何人都可以帮我确定我做错的问题。

Answer 1

您需要格式化代码以便于阅读

您使用了错误的参数来比较Traceback (most recent call last): File "C:/collect_games.py", line 84, in <module> date_obj = datetime.strptime(loop_date, '%Y-%-m-%d') File "E:\Anaconda3\lib\_strptime.py", line 565, in _strptime_datetime tt, fraction = _strptime(data_string, format) File "E:\Anaconda3\lib\_strptime.py", line 354, in _strptime (bad_directive, format)) from None ValueError: '#' is a bad directive in format '%Y-%#m#%d'而不是data1[i]。这也会造成错误的href

您需要将所有数据附加到data1[i][0]。不要使用dyn_div，这将获得附加项而不是当前项。

$(.p).append

Answer 2

虽然这可能不是100％有效的解决方案，但我相信您的主要错误是$(".p").append(dyn_li);行因为在某些时候，有多个元素具有类p，这将使所有内容加倍。

所以这是我未经考验的粗略建议：

    var data1 = [["FINANCE"],["SALE"],["SALE3"]];
    var data2=[["FINANCE","FINANCE1"],["FINANCE","FINANCE2"],["SALE","SALE1"],["SALE","SALE2"],["SALE","SALE3"],["SALE","SALE4"],["SALE3","NOSALE"]]
    var stringData = "";
    var dyn_div="";
    var dyn_ul="";
    var dyn_li='';
    for (var i = 0; i < data1.length; i++) {

        stringData = "<li><a data-toggle='tab' href=#"+data1[i]+">"+data1[i]+"</a></li>"
        $(".list").append(stringData); // this element should also be addressed by an unique ID, but if there is only one element with that class, it's fine
        dyn_div="<div class='tab-pane fade' id="+data1[i]+">'<ul class='p nav nav-tabs'>";
        for(var j=i;j< data2.length;j++){    
          if(data2[j][0]==data1[i]){
                dyn_li= "<li><a data-toggle='tab'  href=#"+data2[j][1]+">"+data2[j][1]+"</a></li>" 
                $("#"+data1[i]).find('.p').first().append(dyn_li); // Here big change
                dyn_div +='</ul></div>';
                $(".tab-content").append(dyn_div); // this also needs to be a unique DOM element
            }
        } 
     }
     $(".p li:first-child").addClass("active");
     $(".tab-content div.tab-pane:first-child").addClass("active in");

动态嵌套标签创建

2 个答案: