Saya ada dua fungsi berikut...
function sizeSearch(size) { const container = document.querySelector('ul.size-ranks'); const rankElems = container.querySelectorAll('li'); rankElems.forEach(e => { e.style.display = 'none'; e.classList.remove('active'); }); const sizeID = size.replace(/\D/g,'') + '-rank'; const sizeElem = document.getElementById(sizeID); if (sizeElem) { sizeElem.classList.add('active'); sizeElem.style.display = ''; } else { container.insertAdjacentHTML('beforeend', '<li class="empty-search">尺寸未找到</li>'); } } function clearSizeSearch() { document.querySelectorAll('li.empty-search').forEach(e => e.remove()); document.querySelectorAll('ul.size-ranks li').forEach(e => e.style.display = ''); document.querySelector('ul.size-ranks li.active').scrollIntoView(); }Elemen
sizeSearch()
函数正常工作。当调用clearSizeSearch()
函数时,所有的<li>
元素按预期重新显示出来,你可以很短暂地看到预期的.active
menatal ke dalam paparan, tetapi kemudian ia menatal kembali dengan serta-merta di atas elemen bekas (atau mungkin memaparkan semula dengan cara ini selepas DOM selesai diselesaikan?).
Jika saya menjalankannya secara manual dalam konsol document.querySelector('ul.size-ranks li.active').scrollIntoView();
,然后运行clearSizeSearch()
,那么它就正常工作。这一点,再加上当运行clearSizeSearch()
时我可以短暂地看到它滚动到视图中,似乎表明它可能在前面的命令执行完成之前运行,但据我所知,forEach()
Lalainya bukan tak segerak, sebarang arahan selepasnya tidak sepatutnya dijalankan sebelum ia selesai.
Ini penyelesaian saya.