javascript - Javascript 活动 MutationObserver 可处理各种元素

Question

我想在 a 中的数字更改required时添加或删除 attr 。如果没有s将添加 attr ，如果有s 将删除 attr 。liullirequiredlirequired

该功能很好用，但仅适用于第一个input[type="file"] 我希望该功能适用​​于页面中的所有文件输入。我想让它观察每一个的变化。

我以为做

const fileList = document.querySelectorAll('ul.file-list')[x];
observer.observe(fileList, {
    childList: true
})

但我有两个问题：

1. 如何找到ul.file-list我正在工作的数组位置（而不是x）。
2. 我不喜欢使用事件监听器。

任何帮助都会很棒。

const observer = new MutationObserver(function(mutations){
    mutations.forEach(function(mutation){
        let liLength = mutation.target.getElementsByTagName("li").length;
        if(mutation.addedNodes.length){
            console.log('added',mutation);
            if(liLength != 0){
                mutation.target.parentElement.getElementsByTagName('input')[0].required = false;
            }
        }
        if(mutation.removedNodes.length){
            if(liLength == 0){
                mutation.target.parentElement.getElementsByTagName('input')[0].required = true;
            }
        }
    });
});

const fileList = document.querySelector('ul.file-list');
observer.observe(fileList, {
    childList: true
})

这是 html 标记。这是我拥有的页面中的 27 个 ul 之一

<div class="custom-file" id="tz-file">
    <label class="custom-file-label" for="tzfile">add file</label>
    <ul class="file-list">
        <li><a href="./uploads/9999999/1.pdf" target="_blank"> 1.pdf </a>
            <span class="item-file" id="2018-9999999-21314-1">remove file</span></li>
    </ul>
    <input type="file" class="custom-file-input" id="tzfile" name="tzfile">
</div>

标签： javascriptmutation-observersqueryselectall