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';
        }
    }

}