html флажок unclick скрывает переменные функции

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 счто выбрал пользователь.Это просто делается путем проверки атрибута checkbox checked и добавления / удаления атрибута checkbox value в selectedRoutes.

. Таким образом, вы можете иметь текущие выбранные значения в массиве.Чтобы использовать его, вы можете иметь, например, кнопку и захватить событие click.В этом случае вам нужно только проверить, какие элементы routes выбраны путем поиска в массиве selectedRoutes.Если они выбраны, вы вызываете функцию 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>