zoukankan      html  css  js  c++  java
  • 根据RadioButtonList动态显示隐藏Div

    使用场景

    今天在写项目的时候遇到一个需求,注册页面,用户先选择类型继而填表单,所以需要根据选择切换表单,使用的前端框架是MiniUI,但是在实现这个功能的时候mini.get()方法无法得到div元素,所以使用原生js通过修改css来实现隐藏显示的功能。

    基础代码

    使用的是MiniUI的单选按钮组件,Api文档中有写valuechanged方法,但是添加到div中不生效。

     <div id="myrbl" class="mini-radiobuttonlist" repeatDirection="vertical" textField="text" valueField="id" value="" url="info.txt"></div>
        <div id="d1" name="d1" class="hide d" ></div>
        <div id="d2" name="d2" class="hide d" ></div>
        <div id="d3" name="d3" class="hide d" ></div>
        <div id="d4" name="d4" class="hide d" ></div>
    

    Css

    不显示的div

    .hide{
            display:none;
    } 
    

    JS

    在js中给单选按钮组件绑定事件,当值发生变化的时候取值,判断,显示。

    <script type="text/javascript">
        mini.parse();
        var id = mini.get("myrbl");
        id.on("valuechanged",function(e){
            value = this.getValue();
            var d1 = document.getElementById("d1");
            var d2 = document.getElementById("d2");
            var d3 = document.getElementById("d3");
            var d4 = document.getElementById("d4");
            if(value == 0){
                d1.className="";
                d2.className="hide";
                d3.className="hide";
                d4.className="hide";
            }else if(value == 1){
                d1.className="hide";
                d2.className="";
                d3.className="hide";
                d4.className="hide";
            }else if(value == 2){
                d1.className="hide";
                d2.className="hide";
                d3.className="";
                d4.className="hide";
            }else{
                d1.className="hide";
                d2.className="hide";
                d3.className="hide";
                d4.className="";
            };
        })
    </script>
    

    效果

    效果图

    总结

    代码逻辑很简单,写的时候却浪费了一些时间,一是对HTML CSS JS不熟练,二是对MiniUI也不熟悉,谨记多练!

  • 相关阅读:
    wxpython快速入门
    python核心编程 第四章 和第五章
    python核心编程 第三章
    python核心编程 第二章 快速入门
    Nginx 使用札记
    PHP 函数总结
    node.js安装部署
    linux
    在Linux上安装Git
    php超级全局变量
  • 原文地址:https://www.cnblogs.com/ljsh/p/10667800.html
Copyright © 2011-2022 走看看