实现点击产生这样效果,有很多种实现方式,一步一步的如何做到最佳实践。
版本一
<ul id="list">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<script>
// 版本一
var list = document.querySelector('#list');
var items = document.querySelectorAll('#list > li');
list.addEventListener('click', function(e) {
if(e.target.tagName === 'LI'){
var item = e.target;
}
items.forEach(function(item){
item.style.background = '#fff';
item.style.color = '#000';
});
item.style.background = '#000';
item.style.color = '#fff';
});
</script>
缺点 : 样式和行为耦合,css控制样式,js控制行为等,直接通过js操作dom样式,不易扩展,并且也不是一个好的结构样式分离实践
版本二
<ul id="list">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>赵六</li>
</ul>
<script>
// 版本二
<style>
.active {
background: #000;
color: #fff;
}
</style>
var list = document.querySelector('#list');
var items = document.querySelectorAll('#list > li');
list.addEventListener('click', function(e) {
if(e.target.tagName === 'LI'){
var item = e.target;
}
items.forEach(function(item){
item.setAttribute('class', '');
});
item.setAttribute('class', 'active');
});
使用class防止了纯dom样式操作,已经是一个好的实践了
版本三
如果考虑,我们只是需要有这样一个样式,而不是为了获得我们选中的li标签,以后也不会对他进行dom操作,那么是否有完全脱离js的实现方式呢?
<style>
input[name = items] {
display: none;
}
input:checked + label {
background: #000;
color: #fff;
}
label {
width: 100%;
display: inline-block;
}
</style>
<ul id="list">
<li>
<input type="radio" id="item0" name="items">
<label for="item0">张三</label>
</li>
<li>
<input type="radio" id="item1" name="items">
<label for="item1">李四</label>
</li>
<li>
<input type="radio" id="item2" name="items">
<label for="item2">王五</label>
</li>
<li>
<input type="radio" id="item3" name="items">
<label for="item3">赵六</label>
</li>
</ul>
虽然样式有一点不一样,但是样式是很灵活的,通过css和灵活运用html特性,不用js就完成了这样的一个功能。
总结
老师还讲了一个demo,但是那个demo稍微复杂了一点,其实就是想要列举出如何慢慢优化你的JS,写出JS很容易,写好JS很难,打好基本功,比什么都重要,这是我迷茫了那么久,面对前端无穷无尽的新知识,最后得出的结论。
这篇文章,可以让我浮躁的心,慢慢安静下来