从 Office Fabric UI 获取切换元素的值

Question

我正在尝试从 office fabric ui 中获取切换按钮的值。

https://developer.microsoft.com/en-us/fabric-js/components/toggle/toggle

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" 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>

问题是我不确定如何获取On 或Off 的值。

我通常会使用document.querySelector('input.demo-toggle-3').textConent，但由于这不是文本字段，所以它会显示为undefined

对于获取 Fabric ui 切换器的 On 或 Off 值有什么建议吗？

Answer 1

简单的技巧

当切换打开时，标签获得is-selected 类。

您可以使用#demo-toggle-3 + .is-selected 之类的方式获取它。 （如果它也有类is-selected，则选择器会采用id=demo-toggle-3之后的相邻元素

工作演示

var ToggleElements = document.querySelectorAll(".ms-Toggle");
for (var i = 0; i < ToggleElements.length; i++) {
  new fabric['Toggle'](ToggleElements[i]);
}


function isSelected() {
  var state = document.querySelector('#demo-toggle-3 + .is-selected') != null;
  console.log(state);
  return state;
}

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css" />
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css" />
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></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>

<button onclick="isSelected()">IsSelected?</button>