如何更新Javascript中所有自定义元素示例的值？

xqkwcwgp 于 2023-01-24 发布在 Java

关注(0)|答案(1)|浏览(98)

我开始在Javascript中使用Web组件。我有一个名为VariantSelects的类，我希望每个示例都有相同的值。因此，无论示例A中发生什么变化，示例B都应该收到相同的值。我该怎么做呢？
为了便于演示，我将代码最小化了。函数的实际数量要复杂得多。

<!-- instance A -->
<variant-selects></variant-selects>
<!-- instance B -->
<variant-selects></variant-selects>

class VariantSelects extends HTMLElement {
    constructor() {
        super();
        this.currentVariant = null;
        this.addEventListener('change', this.onVariantChange);
        this.init();
    }

    init() {
        // do stuff
    }

    onVariantChange() {
        // should be updated in all instances
        this.currentVariant = 123;
    }
}

customElements.define('variant-selects', VariantSelects);

先谢了!

JavaScript

来源：https://stackoverflow.com/questions/75200194/how-to-update-the-values-of-all-custom-element-instances-in-javascript

1条答案

按热度按时间

rqenqsqc1#

我想我明白了，虽然这可能不是最好的解决办法...

const allVariantRadios = document.querySelectorAll('variant-radios');
Array.from(allVariantRadios).forEach(radio => {
  radio.addEventListener('change', updateAllInstances)
});

function updateAllInstances(e) {
  allVariantRadios.forEach(instance => {
    instance.querySelector(`input[value="${e.target.value}"]`).checked = true;
    instance.onVariantChange();
  });
}

赞(0）回复(0）举报 2023-01-24

我来回答

如何更新Javascript中所有自定义元素示例的值？

1条答案

相关问题

热门标签

最新问答