jquery - 通过循环创建数据时出现问题

Question

我正在使用 plugin在元素上创建输入和输出。

正常输出选项配置如下:

outputs: {
    output_0: {
     label: '0',
     id: 'site0_0',
    },
    output_1: {
     label: '1',
     id: 'site1_1',
    },
    output_2: {
     label: '2',
     id: 'site2_2',
    },
}

当按照上面的方式在我的脚本中静态编写它时，它可以正常工作。

我现在尝试使用循环动态创建此列表:

$(site).each(function(i, option) {
    sites += "output_" + option + ": { label: '" + option + "', id: 'site" + option + "_" + id + "',},"
})

这会产生与上面静态设置版本相同的数据:(尽管布局不那么整洁)

output_0: {
 label: '0',
 id: 'site0_0',
},
output_1: {
 label: '1',
 id: 'site1_1',
},
output_2: {
 label: '2',
 id: 'site2_2',
},

但是当我尝试按如下方式添加它时，我收到很多错误:

outputs: {
    sites
}

jquery.flowchart.js?1565088567:545 Uncaught TypeError: Cannot read property 'replace' of undefined
    at e.<computed>.<computed>._createSubConnector (jquery.flowchart.js?1565088567:545)
    at e.<computed>.<computed>._createSubConnector (jquery-ui.min.js?1565088567:6)
    at addConnector (jquery.flowchart.js?1565088567:516)
    at e.<computed>.<computed>._getOperatorFullElement (jquery.flowchart.js?1565088567:527)
    at e.<computed>.<computed>._getOperatorFullElement (jquery-ui.min.js?1565088567:6)
    at e.<computed>.<computed>.createOperator (jquery.flowchart.js?1565088567:583)
    at e.<computed>.<computed>.createOperator (jquery-ui.min.js?1565088567:6)
    at HTMLDivElement.<anonymous> (jquery-ui.min.js?1565088567:6)
    at Function.each (jquery-1.12.2.min.js?1565088567:2)
    at n.fn.init.each (jquery-1.12.2.min.js?1565088567:2)

第 545 行显示:

    $operator_connector_label.html(connectorInfos.label.replace('(:i)', subConnector + 1));

是否可以在循环中创建此数据？如果可以，如何创建？

谢谢

Answer 1

您无法按照您尝试的方式将对象属性作为字符串值提供给父对象。

要解决此问题，请在循环内创建子对象，如下所示:

var obj = {};

$(site).each(function(i, option) {
  obj['output_' + option] = {
    label: option,
    id: 'site' + option + '_' + id
  }
});

// in settings of the plugin:
outputs: obj

如果它不是 Element 或 Element 对象数组，我还建议不要从 sites 创建 jQuery 对象。从上下文来看，它似乎只是一个普通的字符串数组，因此基本的 for() 或 forEach() 会更合适。