Question

我有一组标签，以及一组在单击标签时打开的面板。为了能够同时对标签和相关面板进行操作，我想将它们一起存储在一个对象中，如下所示：

{ 
   tab : <div id='tab1' data-target='panel1'></div>
   tabPanel : <div id='panel1'></div>
}

我希望能够通过名称访问它们，所以我将名称存储为对象的键，如下所示：

 var tabs =   {
       'panel1' : { 
           tab : <div id='tab1' data-target='panel1'></div>
           tabPanel : <div id='panel1'></div>
        },
       'panel2' : { 
           tab : <div id='tab2' data-target='panel2'></div>
           tabPanel : <div id='panel1'></div>
        },
    }

现在，当有人点击#tab1时，我只需致电tabs[e.data(target)]即可让两个元素都行动起来。

有时操作是删除该选项卡（如果我从对象集中删除，还不确定），因此我需要对下一个选项卡对象（panel2）进行操作，使其成为新的活动选项卡。但是，您无法抓取tabs对象中的“next”键，因此我想用对象数组替换对象的对象。如果我这样做，那么我不能再抓取DOM元素集而不循环遍历数组并检查键。

似乎没有正确的解决方案，但在最少的代码和效率方面是否有更好的选择？

Answer 1

快速解决方案可以在每个标签中存储对下一个标签对象的引用，例如：

var panel1 = { 
       tab : <div id='tab1' data-target='panel1'></div>
       tabPanel : <div id='panel1'></div>
    };

var panel2 = { 
       tab : <div id='tab2' data-target='panel2'></div>
       tabPanel : <div id='panel1'></div>
    };


panel1.next = panel2; 
//panel2.next = panel3 and so on...

var tabs = {
    'panel1' : panel1 , 'panel2' : panel2
};

现在您可以通过选项卡中的字段名称访问它们，并使用.next属性获取下一个。

然而，这是某种尴尬。也许你应该找到javascript的索引链表实现并使用它。或者另一种类型的高级集合。

有序键：对象的值对

1 个答案: