js实现隐藏和显示html

通常，我们的目的是在点击一个按钮时触发显示样式的不同；

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" onclick="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" onclick="addCourse()">增加课程</button>
                </div>

　　

  对于需要隐藏的样式：需要设置style="display:none"

  并对不同的类型设置不同的class标签，比如删除课程设置的是deleteType-item, 增加课程设置的是addType-item

2. 其次需要在不同的条件下展示不同的样式，以下面的实现为例，我们需要在select框发生变化的时候，来确定到底是删课还是加课，onchange="permissionChange()"方法正是帮助我们来改变样式的；

 <div class="col-sm-4">
                        <select class="form-control" id="permissionType" onchange="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';
        }
    }

}