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事件。在活动中，您只需要通过搜索routes数组来检查选择了哪些selectedRoutes元素。如果选中它们，则使用该路径的参数调用getRoute函数。

＆＃13;

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()} };

＆＃13;

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

＆＃13;

html复选框unlick隐藏功能变量

1 个答案: