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

Posted 2023-03-25

【中文标题】从 Office Fabric UI 获取切换元素的值

【英文标题】：Get Value of Toggle element from Office Fabric UI

【发布时间】：2021-11-12 14:40:44

【问题描述】：

我正在尝试从 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 值有什么建议吗？

【参考方案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>

【讨论】：

在我的代码中只使用var state = document.querySelector('#demo-toggle-3 + .is-selected') != null; console.log(state); 对我有用。那是纯粹的天才（使用.is-selectedclass。再次感谢您