zoukankan      html  css  js  c++  java
  • 根据状态隐藏按钮

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

  • 相关阅读:
    好理解的堆排序
    SpringCloud 整合 Python 服务
    SpringCloud入门总结
    Spring异常集中处理和日志集中打印
    Java枚举类型的理解及在后台响应中的使用
    Elasticsearch合并高亮字段
    Elasticsearch分析器结构组成
    Elasticsearch实现英文区分大小写搜索
    Nginx三大功能
    Elasticsearch Java Client 版本区别及起步(5.X 和6.X)
  • 原文地址:https://www.cnblogs.com/xuchao0506/p/9765521.html
Copyright © 2011-2022 走看看