Javascript активный MutationObserver для работы с различными элементами - PullRequest
Новая
       17

Javascript активный MutationObserver для работы с различными элементами

0 голосов
/ 25 июня 2018

Я хочу добавить или удалить required attr при изменении числа li в ul.Если нет li s, будет добавлен атрибут required, а если есть li s, атрибут required будет удален.

Функция отлично работает, но только дляfirst 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 'уль на странице у меня 

<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>
...