0

我正在尝试从 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>

问题是我不确定如何获得Onor的值Off。

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

关于获取 Fabric ui 切换器的 On 或 Off 值的任何建议？

4

1 回答 1

0

简单的技巧

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

你可以用类似的东西抓住它#demo-toggle-3 + .is-selected。demo-toggle-3（如果它也有类，则选择器取其后的相邻元素和具有 id= 的元素is-selected

工作演示

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>

于 2021-09-17T18:46:43.320 回答