带有标题和子标题的代码

Question

我一直在寻找一种行情或消息显示系统。

基本上我想要一个标题数组。例如：

var Headers = [
    ["Header 1"],
    ["Header 2"],
    ["Header 3"],
    ["Header 4"]
];

然后为与初始数组相关的子标题设置一个或多个数组。例如：

var Messages1 = [
    ["Message1 1"],
    ["Message1 2"],
    ["Message1 3"]
];

var Messages2 = [
    ["Message2 1"],
    ["Message2 2"],
    ["Message2 3"]
];

// etc etc etc

我想要实现的是让一个 div 显示标题，另一个 div 循环遍历与该标题相关的消息。然后移动到下一个标题，然后显示与该标题相关的消息。希望这是有道理的。

如果提供正确的解决方案，数组的结构可能会发生变化。

我确定它可能已经完成，但是我在网上看不到示例。

即使网上有一个，我也很乐意尝试对代码进行逆向工程。

任何帮助将不胜感激。

问候，

jmcall10

Answer 1

不确定我是否完全理解您的要求，但您是否正在寻找这样的东西：

var headers = [
    {
        header: 'Header1',
        subheaders: [
            'Subheader1',
            'Subheader2',
            '...'
        ]
    },
    {
        header: 'Header2',
        subheaders: [
            'Subheader3',
            'Subheader4',
            '...'
        ]
    }
]

如果您担心子标题的重复，可以将它们移动到单独的对象：

var subheaders = {
    'subheader1': 'Subheader1',
    'subheader2': 'Subheader2',
    'subheader3': 'Subheader3',
    'subheader4': 'Subheader4',
}

并通过对象键在 headers 数组中引用它们：

var headers = [
    {
        header: 'Header1',
        subheaders: [
            'subheader1',
            'subheader2',
            '...'
        ]
    },
    {
        header: 'Header2',
        subheaders: [
            'subheader1',
            'subheader2',
            '...'
        ]
    }
]

重要提示：请记住，您应该为子标题对象的键设置正确的命名约定。 subheader1、subheader2 可能是一个糟糕的选择，即使仅用于示例。 :)

编辑：

循环浏览它们的第一个版本：

headers.forEach(function (item) {
    console.log(item.header);
    item.subheaders.forEach(function (subheader) {
        console.log(subheader);
    });
});

第二个版本也很相似：

headers.forEach(function (item) {
    console.log(item.header);
    item.subheaders.forEach(function (subheaderKey) {
        if (subheaders.hasOwnKey(subheaderKey)) {
            console.log(subheaders[subheaderKey]);
        }
    });
});

干杯。