多级联合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');
    }
    
    ....
}