闭包以及li标签快之间的空间处理问题

两个问题
第一个 下面这个闭包 对每个元素绑定对时候是绑定的i还是绑定的具体的数
具体一点说就是 绑定的是colors[0][i] 等我点击的时候i是多少就执行多少
还是说我绑定的时候 循环里当i=0时 我就绑定 colors[0][0] i=1时我就绑定colors[0][1]

这里不用let 用立即执行函数应该怎么写?

图片说明
第二个 为什么 中间绿色选项快速点击的时候会出现文字选择的效果
我把div弄成一行就没有了
这里应该怎么处理?
图片说明


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生js小demo集合</title>
</head>
<style>
    body{
        background-color: lightgreen;
    }
    .container{
        width: 500px;
        margin: 20px auto;
    }
    .control{
        margin: 0 auto;
    }
    .control .button{
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
    .control .button.red{
       background-color: red;
    }
    .control .button.red.checked{
        background-color: white;
        box-shadow: 0 0 0 6px red inset;
    }
    .control .button.green{
        background-color: green;

    }
    .control .button.green.checked{
        background-color: white;
        box-shadow: 0 0 0 6px green inset;
    }
    .control .button.black{
        background-color: black;
    }
    .control .button.black.checked{
        background-color: white;
        box-shadow: 0 0 0 6px black inset;
    }

    ul{
        margin-top: 5px;
        padding: 0;
        border:1px solid white;
        list-style-type: none;
        display: flex;
        background-color: green;
    }
    li{
        height:30px;
        line-height: 30px;
        display: inline-block;
        flex: 1;

        border-right: 1px solid white;
        text-align: center;
    }
    li:last-child{
        border-right: none;
    }
    li a{
        text-decoration: none;
        color: white;
    }
</style>
<body>
<div class="container">
    <div class="control">
        <div class="button red"></div>
        <div class="button green"></div>
        <div class="button black"></div>
    </div>
    <ul>
        <li><a href="javascript:;">新闻</a></li>
        <li><a href="javascript:;">娱乐</a></li>
        <li><a href="javascript:;">体育</a></li>
        <li><a href="javascript:;">电影</a></li>
        <li><a href="javascript:;">音乐</a></li>
        <li><a href="javascript:;">旅游</a></li>
    </ul>
</div>
<script>
    var colors = [['red','green','black'],['pink','lightgreen','lightslategrey']];
    var buttons = document.getElementsByClassName("button");
    buttons[1].classList.add('checked');
    var ul = document.getElementsByTagName('ul')[0];
    //对于每个button都要绑定一个事件,1.改变导航的背景色为button的颜色,2.改变body的背景色为button颜色的浅色
    for(let i =0;i<buttons.length;i++){
        buttons[i].addEventListener('click',function (e) {
            ul.style.backgroundColor=colors[0][i];
            document.body.style.backgroundColor=colors[1][i];
            //删除buttons的checked类,在点击元素上增加checked类
            buttons[0].classList.remove('checked');
            buttons[1].classList.remove('checked');
            buttons[2].classList.remove('checked');
            e.target.classList.add('checked');
        })
    }
</script>
</body>
</html>

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!