SOURCE

var zhuo = document.getElementById('zhuo')
var li = zhuo.getElementsByTagName('li')

for(let i = 0, len = li.length; i < len; ++i){
    li[i].onclick = function () {
        console.log(i+1) // 写到这里，心中暗爽：不就这么简单吗？那你这坑就踩得稳稳的，一测试发现
    }
}
// 无论你点击哪一个标签都会输出：3
// 这是为什么呢？
// 下面分析一下代码。

// console.log(i) // 假装没有被注释

<ul id="zhuo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<div id = "cnm"></div>
<!--div class="button"></div-->

<div>
    <input>
    <button type="button">搜索</button>
</div>

.hhh {
    display: flex;
    position: relative;
    justify-content: space-between;
}

.u {
    width: 100px;
    height: 100px;
    background-color: red;
}

#cnm {
    border: 1px solid black;
    height: 40px;
    width: 100px;
    background-color: red;
}

#cnm::before {
    height: 40px;
    width: 150px;
    border: 1px solid black;
    background-color: green;
    transform: rotate(90deg);
}

#cnm:hover {
    background-color: blue;
    transform: translate(50px, 0);
}

.button {
    height: 20px;
    cursor: pointer;
    position: absolute;
    padding-right: 28px;
    background: #f5f5f5;
    overflow: hidden;
}

.button:before {
    transform: rotate(90deg);
    content: "aa";
    display: inline-block;
    width: 100%;
    height: 20px;
    background: #ffffff;
    color: #ffffff;
    position: relative;
    left: 2px transition: left .5s;
}

.button:hover {
    background: green;
    color: green;
}

.button:hover:before {
    left: 25px;
}

div{
  border: 1px solid red;
  display: grid;
  grid-template-columns: auto 100px;
}