根据状态隐藏按钮

最新推荐文章于 2025-03-10 21:37:25 发布

转载最新推荐文章于 2025-03-10 21:37:25 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuchao0506/p/9765521.html

文章标签：

#javascript #xhtml #java #ViewUI

本文介绍了一种根据对象状态动态控制网页按钮显示隐藏的方法，通过JavaScript根据后端传来的状态码，选择性地显示对应的编辑、删除、关闭和发布按钮。

需求描述：进入详情页的时候，要根据对象的状态判断详情页的按钮展示情况： 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我自己的好像不好用，同事的这么写完全没问题

转载于:https://www.cnblogs.com/xuchao0506/p/9765521.html