Question

我想动态更改列表元素的顺序。单击后，单击的元素应跳至第一位。但是它总是跳到最后一位。有什么建议吗？

    const ulElement = document.getElementById('nav-list');
    const fragment = document.createDocumentFragment();
    const listItems = ['Home', 'Work', 'Contact'];
    
    
    listItems.forEach((item) => {
        const li = document.createElement('li');
        li.textContent = item;
        li.setAttribute('id', item.toLowerCase());
        li.addEventListener('click', (event) => {
            listItems.forEach((items, i) => {
                if (items.toLowerCase() === event.target.id) {
                    listItems.splice(i, 1);
                    listItems.unshift(event.target.id);
                }
                fragment.appendChild(li);
            });
            ulElement.appendChild(fragment);
            console.log(ulElement);
        });
        fragment.appendChild(li);
    });
    
    ulElement.appendChild(fragment);

<ul id="nav-list"></ul>

Answer 1

替换行：

s1.toString()

使用：

s2.toString()

Answer 2

您可以使用“ insertBefore”。查看方式：

<script type="text/javascript">
        const ulElement = document.getElementById('nav-list');
const fragment = document.createDocumentFragment();
const listItems = ['Home', 'Work', 'Contact'];


listItems.forEach((item) => {
    const li = document.createElement('li');
    li.textContent = item;
    li.setAttribute('id', item.toLowerCase());
    li.addEventListener('click', (event) => {
        listItems.forEach((items, i) => {
            if (items.toLowerCase() === event.target.id) {
                listItems.splice(i, 1);
                listItems.unshift(event.target.id);
            }
            fragment.appendChild(li);
        });

        //ulElement.appendChild(fragment);
        ulElement.insertBefore(fragment, ulElement.firstChild);
        console.log(ulElement);
    });
    fragment.appendChild(li);
});

ulElement.appendChild(fragment);
</script>

Answer 3

感谢您的提问；我的代码在这里：

const ulElement = document.getElementById('nav-list');
const fragment = document.createDocumentFragment();
const listItems = ['Home', 'Work', 'Contact'];

listItems.forEach(item=>{
    const li = document.createElement('li');
    li.textContent = item;
    li.setAttribute('id', item.toLowerCase());
    fragment.appendChild(li);
    return li;
});

ulElement.appendChild(fragment);

ulElement.addEventListener("click",event=>{

    let li =event.target;

    if(li.tagName==='LI'){
        fragment.appendChild(li);
        ulElement.insertBefore(fragment,ulElement.firstElementChild);
    }
});

我认为这个方案更好。

动态更改的列表无法正常工作-需要纯js

3 个答案: