javascript - html复选框取消单击隐藏函数变量

Question

我使用标签创建了复选框:

<label><input type="checkbox" />ATL6101</label><br>
<label><input type="checkbox" />ATL6102</label><br>
<label><input type="checkbox" />ATL6103</label><br>
<label><input type="checkbox" />ATL6104</label><br>
<label><input type="checkbox" />ATL6105</label><br>

这对应于一个函数变量。

Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {


    getRoute('4200 N COMMERCE DR,30344-5707', '822 RALPH MCGILL BLVD NE,30306', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Green', 'ATL6101');

    getRoute('4200 N COMMERCE DR,30344-5707', '4575 WEBB BRIDGE RD,30005', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Lime', 'ATL6102');

    getRoute('4200 N COMMERCE DR,30344-5707', '520 W PONCE DE LEON AVE,30030', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Maroon', 'ATL6103');

    getRoute('4200 N COMMERCE DR,30344-5707', '575 OLYMPIC DR,30601', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Navy', 'ATL6104');

    getRoute('4200 N COMMERCE DR,30344-5707', '3470 MCCLURE BRIDGE RD,30096', '', '', '', '', '', '', '', '', '', '', '', '', '', '', 'Lime', 'ATL6105');




});

如果未单击复选框，我该如何说忽略函数变量？ 有没有办法可以替换函数中的值并动态创建复选框？

Answer 1

如果我理解正确，您希望动态生成复选框并根据是否选择了相应的复选框来调用函数。

为此，您需要有两个变量。

• routes 包含所有路由和关联参数的对象。该对象将用于创建复选框。
• selectedRoutes 包含当前选定路线名称的数组。这将用于仅在选定的路线上调用 getRoute。

要创建复选框，您可以使用 createElement和 appendChild 。请关注 MDN 链接以获取有关此内容的更多信息，或参阅下面的示例。

您需要确保捕获每个复选框上的 click 事件，以便能够将 selectedRoutes 变量与用户选择的内容同步。只需选中复选框 checked 属性并将复选框 value 属性添加到 selectedRoutes 中即可完成。

这样，您就可以将当前选定的值放入数组中。要使用它，您可以有一个按钮，并捕获 click 事件。在事件中，您只需通过搜索 selectedRoutes 数组来检查选择了哪些 routes 元素。如果选择了它们，您可以使用该路由的参数调用 getRoute 函数。

const content = document.getElementById('content');
const routes = {
  'ATL6101': ['4200 N COMMERCE DR,30344-5707','822 RALPH MCGILL BLVD NE,30306','','','','','','','','','','','','','','','Green'],
  'ATL6102': ['4200 N COMMERCE DR,30344-5707','4575 WEBB BRIDGE RD,30005','','','','','','','','','','','','','','','Lime'],
  'ATL6103': ['4200 N COMMERCE DR,30344-5707','520 W PONCE DE LEON AVE,30030','','','','','','','','','','','','','','','Maroon'],
  'ATL6104': ['4200 N COMMERCE DR,30344-5707','575 OLYMPIC DR,30601','','','','','','','','','','','','','','','Navy'],
  'ATL6105': ['4200 N COMMERCE DR,30344-5707','3470 MCCLURE BRIDGE RD,30096','','','','','','','','','','','','','','','Lime'],
};
let selectedRoutes = [];

for (routeValue in routes) {
  const label = document.createElement('label');
  const input = document.createElement('input');
  const text = document.createTextNode(routeValue);
  input.type = 'checkbox';
  input.value = routeValue;
  input.addEventListener('click', e => {
    if (e.target.checked) {
      selectedRoutes.push(e.target.value);
    } else {
      selectedRoutes.splice(selectedRoutes.indexOf(e.target.value), 1);
    }
  });
  label.appendChild(input);
  label.appendChild(text);
  content.appendChild(label);
};

document.getElementById('action').addEventListener('click', _ => {
  Microsoft.Maps.loadModule('Microsoft.Maps.Directions', _ => {
    for (routeValue in routes) {
      // routeValue is not in selectedRoutes, ie route not selected by user
      if (!selectedRoutes.includes(routeValue)) continue;
      // add the original route name back in params
      const params = routes[routeValue].concat(routeValue);
      // actually call getRoute
      getRoute.apply(this, params);
    }
  });
});


// mocked implementations
const getRoute = console.log;
const Microsoft = {Maps: {loadModule: (x, y) => y()} };

<div id="content"></div>
<button id="action">Click me</button>