多級聯合class定義css的巧用

頁面顯示載入完畢即需設定顯示隱藏，且目標物件是指定範圍（數量變化的）元素的場景時，該技巧特別有用。應用場景：許可權控制等。

<!--  css定義  -->
<style>
.edit-toggle.non-editor .edit-toggle-target {
    display: none;
    visibility: hidden;
}

</style>


<!--  html結構  -->
<div id="testDialog" class="modal fade" data-backdrop="static" role="dialog">
    ....
        <div>
            <ul class="edit-toggle" id="ul1">
                <li>測試資料1 <a onclick="test.delete(this)" class="edit-toggle-target">刪除</a> </li>
                <li>測試資料2 <a onclick="test.delete(this)" class="edit-toggle-target">刪除</a> </li>
            </ul>

        </div>
    ....
</div>


<!--  js中可能會出現的程式碼，場景說明，可能會有動態新增的需求，這時候有保持顯示隱藏屬性與原來一致的要求  -->
var test = {

    delete: function(){
        ....
    },
    add: function(){

        var html = '<li>測試資料n <a onclick="test.delete(this)" class="edit-toggle-target">刪除</a> </li>';

        $('#ul1').append(html);

    },
    
    call: functon(){
        ....
        test.add();
        ....
    }

}



<!--  js控制顯示隱藏  -->

var test = {
    ....
    showNonEditDialog: function() {// 僅展示不編輯
        $('#testDialog').modal('show');
        $('.edit-toggle').addClass('non-editor');

    },
    
    showEditDialog: function() {// 可編輯
        $('#testDialog').modal('show');
        $('.edit-toggle').removeClass('non-editor');
    }
    
    ....
}