小羊也疯狂 2018-05-04 06:53 采纳率: 100%
浏览 474
已采纳

闭包以及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条回答 默认 最新

  • dabocaiqq 2018-05-04 10:45
    关注
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 如何使用chatgpt完成文本分类任务?
  • ¥15 已知速度v关于位置s的等式,怎么转化为已知位置求速度v的等式
  • ¥15 我有个餐饮系统,用wampserver把环境配置好了,但是后端的网页却进去,是为什么,能不能帮远程一下?
  • ¥15 R运行没有名称为"species"的插槽对于此对象类"SDMmodelCV"
  • ¥20 基于决策树的数字信号处理,2ask 2psk 2fsk的代码,检查下报错的原因
  • ¥20 python作业求过程
  • ¥15 wincc已组态的变量过多
  • ¥60 如图:直线与椭圆X轴平行,求直线与椭圆任意一点的相切坐标计算公式
  • ¥50 如何用python使用opencv里的cv::cudacodec::VideoWriter函数对视频进行GPU硬编码
  • ¥100 c#solidworks 二次开发 工程图自动标边线法兰 等折弯尺寸怎么标