如何解决这个问题，必有重酬

img


效果可以是按下后列表相应的项变色就行，如能给出详细代码，必有重酬。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* body{background-color: fuchsia} */
    </style>
</head>

<body>
    <div class="container">
        <div>
            <button id="first">选择第一行</button>
            <button id="second">选择第二行</button>
        </div>
        <div>
            <button id="odd">选择奇数行</button>
            <button id="even">选择偶数行</button>
            <button id="all">选择所有行</button>
        </div>
        <div>
            <button id="clear">清除样式</button>
            <button id="add">添加</button>
            <button id="delete">删除</button>
        </div>

        <div>
            <ul class="ul">
                <li>LL</li>
                <li>ZJW</li>
                <li>AA</li>
                <li>BB</li>
                <li>CC</li>
            </ul>
        </div>
    </div>
</body>
<script>
    function set(type) {
        let li = document.getElementsByClassName('ul')[0].getElementsByTagName('li');
        let appendli = document.createElement('li');
        let ul = document.getElementsByClassName('ul')[0];
        if (type == "add") {
            appendli.innerHTML = "new";
            ul.appendChild(appendli);
        }else if(type == 'delete'){
            // console.log();
            ul.removeChild(li[li.length - 1]);
        } else {
            for (let i = 0; i < li.length; i++) {
                switch (type) {
                    case 'first':
                        i == 0 ? li[i].style.backgroundColor = "red" : li[i].style.backgroundColor = "white";
                        break;
                    case 'second':
                        i == 1 ? li[i].style.backgroundColor = "green" : li[i].style.backgroundColor = "white";
                        break;
                    case 'odd':
                        i % 2 == 0 ? li[i].style.backgroundColor = "blue" : li[i].style.backgroundColor = "white";
                        break;
                    case 'even':
                        i % 2 == 1 ? li[i].style.backgroundColor = "purple" : li[i].style.backgroundColor = "white";
                        break;
                    case 'all':
                        li[i].style.backgroundColor = "fuchsia";
                        break;
                    case 'clear':
                        li[i].style.backgroundColor = "white";
                        break;
                }
            }
        }

    }
    document.getElementById('first').addEventListener('click', function () {
        set('first');
    });
    document.getElementById('second').addEventListener('click', function () {
        set('second');
    });
    document.getElementById('odd').addEventListener('click', function () {
        set('odd');
    });
    document.getElementById('even').addEventListener('click', function () {
        set('even');
    });
    document.getElementById('all').addEventListener('click', function () {
        set('all');
    });
    document.getElementById('clear').addEventListener('click', function () {
        set('clear');
    });
    document.getElementById('add').addEventListener('click', function () {
        set('add');
    });
    document.getElementById('delete').addEventListener('click', function () {
        set('delete');
    });
</script>

</html>