灵兔捣药 2022-08-16 15:33 采纳率: 60%
浏览 309
已结题

layui进行input动态渲染，是失效的，隐藏的input也会展示到页面上，虚心请教

layui进行input动态渲染，是失效的，隐藏的input也会展示到页面上，虚心请教
代码
 <div style="float: left" id="valid" class="layui-input-block">
            <label class="layui-form-label" style="color:white;">
                <input style="display:block" type="checkbox"  name="correctAnswer" value="A" >A
                <input style="display:block" type="checkbox"  name="correctAnswer" value="B" >B
                <input style="display:block" type="checkbox" name="correctAnswer" value="C" >C
                <input style="display:block" type="checkbox" name="correctAnswer" value="D" >D
                <input style="display:none" type="radio"  name="correctAnswer" value="A" >A
                <input style="display:none" type="radio" name="correctAnswer" value="B" >B
                <input style="display:none" type="radio"  name="correctAnswer" value="C" >C
                <input style="display:none" type="radio"  name="correctAnswer" value="D" >D
                <input style="display:none" type="radio"  name="correctAnswer" value="A" >对
                <input style="display:none" type="radio"  name="correctAnswer" value="B" >错
            </label>
        
<script>
    layui.use('form', function () {
        var form = layui.form;
        var $ =layui.jquery;
        // form.render();
        form.on('select(hideoption)', function (data) {
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.elem.id); //得到select id 属性
            console.log(data.elem.name); //得到select name 属性
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
           var res =data.value;
            if(res==="2"){
                document.getElementById("div1").style.display="none";
                document.getElementById("div2").style.display="none";
                var checks = document.getElementsByName("correctAnswer");
                checks[0].style.display="none";
                checks[1].style.display="none";
                checks[2].style.display="none";
                checks[3].style.display="none";
                checks[4].style.display="none";
                checks[5].style.display="none";
                checks[6].style.display="none";
                checks[7].style.display="none";
                checks[8].style.display="block";
                checks[9].style.display="block";
                console.log(checks[2].style.display);
            }else if(res=="1"){
                document.getElementById("div1").style.display="block";
                document.getElementById("div2").style.display="block";
                var checks = document.getElementsByName("correctAnswer");
                checks[0].style.display="block";
                checks[1].style.display="block";
                checks[2].style.display="block";
                checks[3].style.display="block";
                checks[4].style.display="none";
                checks[5].style.display="none";
                checks[6].style.display="none";
                checks[7].style.display="none";
                checks[8].style.display="none";
                checks[9].style.display="none";
                console.log(checks[2].style.display);
            }else if(res == '2') {
                document.getElementById("div1").style.display="block";
                document.getElementById("div2").style.display="block";
                var checks = document.getElementsByName("correctAnswer");
                checks[0].style.display="none";
                checks[1].style.display="none";
                checks[2].style.display="none";
                checks[3].style.display="none";
                checks[4].style.display="block";
                checks[5].style.display="block";
                checks[6].style.display="block";
                checks[7].style.display="block";
                checks[8].style.display="none";
                checks[9].style.display="none";
                console.log(checks[2].style.display);
            }
        });
    });
    function selectCheckOne(obj){
        var checks = document.getElementsByName("sex");
        console.log(checks);
        console.log(obj.checked);
        if(obj.checked){
            for( var i=0;i<checks.length;i++){
                checks[i].checked=false;
            }
            obj.checked=true;
        }else{
            for( var i=0;i<checks.length;i++){
                checks[i].checked=false;
            }
        }
    }





</script>
运行结果及报错内容

前端会全部展示出来

img

  • 写回答

3条回答 默认 最新

  • CSDN专家-showbo 2022-08-16 16:30
    关注

    每个项放到一个容器中，直接设置容器的显示隐藏。layUI模拟出来的UI不会根据原始的dom的display来设置模拟的ui的显示隐藏的。而且可以给分组添加下特殊样式，直接显示对应的分组就行了~

    如果题主要用layUI，需要学下jquery。这个框架居于jquery的。简单示例如下

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试 - Layui</title>
    <link rel="stylesheet" href="../src/css/layui.css">
    <style>
        body {
            padding: 20px;background:#000;
        }
        .hide{display:none}
        #valid{color:#fff}
    </style>
</head>
<body>
    <form class="layui-form" method="get">
        <div class="layui-input-inline">
            <select lay-filter="hideoption" name="hideoption" lay-verify="required" lay-search="">
                <option value="1">第一组</option>
                <option value="2">第二组</option>
                <option value="3">第三组</option>
            </select>
        </div>
        <div id="valid" class="layui-input-block">
            <div class="layui-form-item group1">
                <input type="checkbox" name="correctAnswer" value="A">A
            </div>
            <div class="layui-form-item group1">
                <input type="checkbox" name="correctAnswer" value="B">B
            </div>
            <div class="layui-form-item group1">
                <input type="checkbox" name="correctAnswer" value="C">C
            </div>
            <div class="layui-form-item hide group2">
                <input type="radio" name="correctAnswer" value="A">A
            </div>
            <div class="layui-form-item hide group2">
                <input type="radio" name="correctAnswer" value="B">B
            </div>
            <div class="layui-form-item hide group2">
                <input type="radio" name="correctAnswer" value="C">C
            </div>
            <div class="layui-form-item hide group3">
                <input type="radio" name="correctAnswer" value="对">对
            </div>
            <div class="layui-form-item hide group3">
                <input type="radio" name="correctAnswer" value="错">错
            </div>
        </div>
    </form>
        <script src="../dist/layui.js"></script>
        <script>
            layui.use('form', function () {
                var form = layui.form;
                var $ = layui.jquery;
                form.on('select(hideoption)', function (data) {
                    console.log(data)
                    $('#valid .layui-form-item').hide().filter('.group' + data.value).show();
                })
            });;

        </script>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 8月25日
  • 已采纳回答 8月17日
  • 赞助了问题酬金10元 8月16日
  • 创建了问题 8月16日

悬赏问题

  • ¥15 Python爬取指定微博话题下的内容，保存为txt
  • ¥15 vue2登录调用后端接口如何实现
  • ¥65 永磁型步进电机PID算法
  • ¥15 sqlite 附加（attach database）加密数据库时，返回26是什么原因呢？
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能？(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗？
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教：如何用postman调用本地虚拟机区块链接上的合约？