Блог

Главная - Вопросы по программированию - сделайте класс «выбран» частью запуска

сделайте класс «выбран» частью запуска

#javascript #html #css #office-ui-fabric

Вопрос:

Я пытаюсь включить переключатель по умолчанию при загрузке веб-страницы. Я использую пользовательский интерфейс Microsoft Fabric.

Когда я попытаюсь добавить is-selected в <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0"> него, он будет удален is-selected при запуске страницы. Тем не менее, я могу добавить его позже в тег, используя инструменты проверки в Chrome.

Вот код, который я использовал:

HTML

 <div class="ms-Toggle">
  <span class="ms-Toggle-description">Let apps use my location</span> 
  <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
  <label for="demo-toggle-3" class="ms-Toggle-field is-selected" tabindex="0">
    <span class="ms-Label ms-Label--off">Off</span> 
    <span class="ms-Label ms-Label--on">On</span> 
  </label>
</div>

язык JavaScript

 <script type="text/javascript">
  var ToggleElements = document.querySelectorAll(".ms-Toggle");
  for (var i = 0; i < ToggleElements.length; i  ) {
    new fabric['Toggle'](ToggleElements[i]);
  }
</script>

Однако, когда страница загружается, она выглядит так:

 <div class="ms-Toggle">
  <span class="ms-Toggle-description">Let apps use my location</span> 
  <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
  <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0">
    <span class="ms-Label ms-Label--off">Off</span> 
    <span class="ms-Label ms-Label--on">On</span> 
  </label>
</div>

Комментарии:

1. Я мало что знаю о пользовательском интерфейсе Fabric, но я предполагаю, что вызов new fabric['Toggle'] элемента сбрасывает классы во всем. После этого вы сможете программно добавить класс обратно в ( ToggleElements[i].querySelector('.ms-Toggle-field').classList.add('is-selected') ). Но у меня нет возможности это проверить.

Ответ №1:

Благодаря @HereticMonkey я смог решить проблему, добавив is-selected класс в элемент переключения после его создания. Поскольку у меня есть несколько переключателей, я использовал forloop примерно так:

 for (var i = 0; i < ToggleElements.length; i  ) {ToggleElements[i].querySelector('.ms-Toggle-field').classList.add('is-selected')}
Метки: