根据状态隐藏按钮

Posted 2021-01-11 xuchao0506

需求描述：进入详情页的时候，要根据对象的状态判断详情页的按钮展示情况： 1 编辑 删除 关闭 发布 2 编辑 删除 关闭 3 编辑 关闭 4关闭 

解决思路：默认所有的按钮都隐藏，根据状态1234，控制将对应按钮的style属性由隐藏改为显示，

代码：

//html代码：
<div class="btn-group">
    <button class="btn sbold green" id="toDelete" onclick="" style="display: none;">
            <span class="ladda-label">
                <i class="fa fa-plus" aria-hidden="true"></i>删除
            </span>
    </button>
</div>
<div class="btn-group">
    <button class="btn sbold green" id="toRelease" onclick="" style="display: none;">
                <span class="ladda-label">
                    <i class="fa fa-plus" aria-hidden="true"></i>发布
                </span>
    </button>
</div>
<div class="btn-group">
    <button class="btn sbold green" id="toEdit" onclick=""  style="display: none;">
            <span class="ladda-label">
                <i class="fa fa-plus" aria-hidden="true"></i>编辑
            </span>
    </button>
</div>
<div class="btn-group">
    <button class="btn sbold green" id="toClose" onclick=""  style="display: none;">
            <span class="ladda-label">
                <i class="fa fa-plus" aria-hidden="true"></i>关闭
            </span>
    </button>
</div>

//js代码
<script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
    var code =[[${code}]]; //获取后台穿过来的状态
    switch (code) {
        case 1:
            document.getElementById("toRelease").style.display="block";//显
            document.getElementById("toDelete").style.display="block";//显
            document.getElementById("toEdit").style.display="block";//显
            document.getElementById("toClose").style.display="block";//显
            break;
        case 2:
            document.getElementById("toDelete").style.display="block";//显
            document.getElementById("toEdit").style.display="block";//显
            document.getElementById("toClose").style.display="block";//显
            break;
        case 3:
            document.getElementById("toEdit").style.display="block";//显
            document.getElementById("toClose").style.display="block";//显
            break;
        case 4:
            document.getElementById("toClose").style.display="block";//显
            break;
    }
</script>

//后台java代码
map.addAttribute("code", code);
return VIEW_PATH + "/packDetail";

总结：其实还可以使用其他的方法都能实现这种效果  另外

document.getElementById("toClose").style.display="block"; //方式1
$("#toClose").parent().css("display", "");//方式2

都可以，不过方式2我自己的好像不好用，同事的这么写完全没问题