javascript - 更改时无法触发鞋带 (CSS) 选择元素

Question

我正在使用select Shoelace -element 作为协议复选框，需要检查它是否被选中。Chrome DevTools 会在检查开关时向我显示添加到标签的类“switch--checked”。未选中时将其删除。

当检查开关并尝试使用 jQuery hasClass函数时，我需要触发一些事件。我尝试了以下几节课。这些都没有触发我的事件。请帮忙！

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

选择未选中的元素

选中元素强文本

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));

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