通常,我们的目的是在点击一个按钮时触发显示样式的不同;
1. 首先清楚我们需要默认展示的样式,其次需要找到点击某个按钮后需要展示的样式;
对于默认展示的样式:我们需要设置style="display:block"
<div class="col-sm-6 deleteType-item" style="display: block">
<label class="col-sm-4 control-label"></label>
<button class="btn btn-primary" οnclick="deleteCourse()">删除课程</button>
</div>
<div class="col-sm-6 addType-item" style="display: none">
<label class="col-sm-4 control-label"></label>
<button class="btn btn-primary" οnclick="addCourse()">增加课程</button>
</div>
对于需要隐藏的样式:需要设置style="display:none"
并对不同的类型设置不同的class标签,比如删除课程设置的是deleteType-item, 增加课程设置的是addType-item
2. 其次需要在不同的条件下展示不同的样式,以下面的实现为例,我们需要在select框发生变化的时候,来确定到底是删课还是加课,οnchange="permissionChange()"方法正是帮助我们来改变样式的;
<div class="col-sm-4">
<select class="form-control" id="permissionType" οnchange="permissionChange()">
<option value="delete">删课</option>
<option value="add">加课</option>
</select>
</div>
3. 通过js代码控制显示的html, 我们获取到select框的id, 并获取到对应的value, 根据1中的className 获取到对应的节点。然后遍历每种节点的list, 进行修改
function permissionChange() {
var perObj = document.getElementById('permissionType');
var perOption = perObj.options[perObj.selectedIndex] || null;
var addItems = document.getElementsByClassName('addType-item');
var deleteItems = document.getElementsByClassName('deleteType-item');
if (perOption.value === 'delete') {
for (var i = 0; i < deleteItems.length; i++) {
deleteItems[i].style.display = 'block';
}
for (var i = 0; i < addItems.length; i++) {
addItems[i].style.display = 'none';
}
} else {
for (var i = 0; i < deleteItems.length; i++) {
deleteItems[i].style.display = 'none';
}
for (var i = 0; i < addItems.length; i++) {
addItems[i].style.display = 'block';
}
}
}