从 Office Fabric 获取 Toggle 元素的值 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 切换器的开或关值的任何建议？

Answer 1

简单的技巧

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

你可以用 #demo-toggle-3 + .is-selected 之类的东西来获取它。（如果选择器还具有 class 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>

从 Office Fabric 获取 Toggle 元素的值 UI

Get Value of Toggle element from Office Fabric UI

html

javascript

jquery

fabricjs

简单的技巧

工作演示