m0_63881586 2021-11-08 23:47 采纳率: 15.4%
浏览 92
已结题

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

img


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

  • 写回答

1条回答 默认 最新

  • Stephen_112 2021-11-09 09:46
    关注
    
<!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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 11月9日
  • 已采纳回答 11月9日
  • 创建了问题 11月8日

悬赏问题

  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 软件测试决策法疑问求解答
  • ¥15 win11 23H2删除推荐的项目，支持注册表等
  • ¥15 matlab 用yalmip搭建模型，cplex求解，线性化处理的方法
  • ¥15 qt6.6.3 基于百度云的语音识别 不会改
  • ¥15 关于#目标检测#的问题：大概就是类似后台自动检测某下架商品的库存，在他监测到该商品上架并且可以购买的瞬间点击立即购买下单
  • ¥15 神经网络怎么把隐含层变量融合到损失函数中？
  • ¥15 lingo18勾选global solver求解使用的算法
  • ¥15 全部备份安卓app数据包括密码，可以复制到另一手机上运行
  • ¥20 测距传感器数据手册i2c