更改时无法触发鞋带 (CSS) select 元素

Question

我正在使用 select Shoelace-元素作为协议复选框，需要检查它是否被选中。 Chrome DevTools 向我显示了在选中开关时向标签添加的 class“switch--checked”。取消选中时将被删除。

我需要在检查开关时触发一些事件，并尝试使用 jQuery hasClass 函数来实现。我在下面的那个旁边尝试了几个 classes。 None 它触发了我的事件。 请帮忙！

if ( $("label::part(base)").hasClass(".switch--checked") ) {
  // do something
}

Select 元素未检查

Select元素强文本选中

Answer 1

如果您获得对元素实例的引用，您将能够直接读取 checked 属性，并附加一个事件侦听器以在 checked 属性变化：

const slSwitch= document.querySelector('sl-switch');

// Is it checked?
const checked = slSwitch.checked;

// Listen for changes
slSwitch.addEventListener('slChange', (e) => console.log("<sl-switch> is checked?:", e.target.checked));

您可以在其文档中阅读有关自定义元素支持的属性和事件的更多信息：https://shoelace.style/components/switch

更改时无法触发鞋带 (CSS) select 元素

Cannot trigger Shoelace (CSS) select element on change

javascript

jquery

triggers

shoelace