把普通按钮换成layui按钮时，普通按钮对应的js却没有用。（小菜鸟入门小白教程）

于 2019-08-26 00:44:49 发布
阅读量1.6k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/H_ONE_PIECE/article/details/100069714
小菜鸟分享在将普通按钮替换为layui按钮时遇到的问题：点击事件失效。解决方案是在input标签前后添加<label>标签，即使按钮样式变为layui，事件也能正常触发。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

小菜鸟们冲鸭！！

由于本人是个小菜鸟，刚起步，所以写下遇到的点点滴滴，希望能给同是小菜鸟的大家带去一定的帮助吧！

一、问题描述

接上一篇文章，效果实现了，但是发现按钮不好看，于是要求改成layui的按钮但是发现换成layui按钮时，对应的时间却失效了。

1、原来的内容：（大家可以去这个地方把代码复制进去——https://www.runoob.com/runcode——测试一下原始效果）

<html>

<style>

.project-choose,
.message-choose{
    diasplay: flex;
    justify-content: space-between;
}

.project-choose-list,
.message-choose-list{
    width: 350px;
    float: left;
    margin: 52px
 }

.project-item,
.message-item{
    height: 200px;
    margin-right: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.project-item-choose,    
.message-item-unchoose{
border:1px solid red;

}

</style>
<body>
<div class="project-choose">
 <div class="project-choose-list">
<input type="radio"  onclick="show_project(0)"  lay-filter="checkbox-project" name="choose"  />
 <div class="project-item">
我是第一个div
</div>
</div>
<div class="project-choose-list">
<input type="radio"  onclick="show_project(1)"  lay-filter="checkbox-project" name="choose"   />
 <div class="project-item">
 我是第二个div
 </div>
</div>
<div class="project-choose-list">
<input type="radio" onclick="show_project(2)"  lay-filter="checkbox-project" name="choose"   />
<div class="project-item">
我是第三个div
</div>
</div>
</div>
</body>
<script>
   function show_project(id){
       var radio = document.getElementsByClassName('project-item')
       for(var i=0;i<radio.length;i++){
           if(i == id){
               radio[i].className ='project-item project-item-choose '   //定义被选中的div的样子
           }else{
               radio[i].className='project-item  '  //没有被选中的div的样式，如果相加其他的样式只需要在上面的css定义一个样式，然后加入这里面来。
           }
       }
   }
</script>
</html>

2.改成layui按钮：

（1）首先在项目的最上面引入相关文件：

<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css"  media="all">
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>

（2）把普通按钮改为layui按钮，因为layui的按钮在表单里，所用应用表单模块的格式。

<form class="layui-form" action=""  lay-filter="form-project">
<div class="project-choose">
<div class="project-choose-list">
<input type="radio"  onclick="show_project(0)"  lay-filter="checkbox-project" name="choose"  />
 <div class="project-item">
我是第一个div
</div>
</div>
<div class="project-choose-list">
<input type="radio"  onclick="show_project(1)"  lay-filter="checkbox-project" name="choose"   />
 <div class="project-item">
 我是第二个div
 </div>
</div>
<div class="project-choose-list">
<input type="radio" onclick="show_project(2)"  lay-filter="checkbox-project" name="choose"   />
<div class="project-item">
我是第三个div
</div>
</div>
</div>
</form>

（3）在script中应用layui的方法：

<script>  
layui.use('form', function () {
        var form = layui.form;
        form.on('radio(checkbox-project)', function(data){
            if(data.elem.checked){
                $('input[lay-filter="checkbox-project"]').prop('checked',false);
                $(data.elem).prop('checked',true);
            }
            form.render('checkbox','form-project');
        });
    });
</script>

（4）全部都改好了，按钮时变成了layui的按钮，但是按钮的点击事件确没有了，（大家可以去这个地方把代码复制进去——https://www.runoob.com/runcode——测试一下有问题的效果）

<html>
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<style>

.project-choose,
.message-choose{
    diasplay: flex;
    justify-content: space-between;
}

.project-choose-list,
.message-choose-list{
    width: 350px;
    float: left;
    margin: 52px
 }

.project-item,
.message-item{
    height: 200px;
    margin-right: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.project-item-choose,    
.message-item-unchoose{
border:1px solid red;

}

</style>
<body>
<form class="layui-form" action=""  lay-filter="form-project">
<div class="project-choose">
<div class="project-choose-list">
<input type="radio"  onclick="show_project(0)"  lay-filter="checkbox-project"  name="choose"/>
 <div class="project-item">
我是第一个div
</div>
</div>
<div class="project-choose-list">
 <input type="radio"  onclick="show_project(1)"  lay-filter="checkbox-project"  name="choose"/>
 <div class="project-item">
 我是第二个div
 </div>
</div>
<div class="project-choose-list">
<input type="radio"  onclick="show_project(2)"  lay-filter="checkbox-project" name="choose"/>
<div class="project-item">
我是第三个div
</div>
</div>
</div>
</form>
<script>
    layui.use('form', function () {
        var form = layui.form;
        form.on('radio(checkbox-project)', function(data){
            if(data.elem.checked){
                $('input[lay-filter="checkbox-project"]').prop('checked',false);
                $(data.elem).prop('checked',true);
            }
            form.render('checkbox','form-project');
        });
    });

   function show_project(id){
       var radio = document.getElementsByClassName('project-item')
       for(var i=0;i<radio.length;i++){
           if(i == id){
               radio[i].className ='project-item project-item-choose '   //定义被选中的div的样子
           }else{
               radio[i].className='project-item  '  //没有被选中的div的样式，如果相加其他的样式只需要在上面的css定义一个样式，然后加入这里面来。
           }
       }
   }
</script>
</body>
</html>

 

二、解决办法

1、只需要在input标签的前后加入<label>标签就可以了。（本小菜鸟也不知道具体原因，但是问题就是解决了，目前测试来看，只要是变成layui的按钮，然后效果不出现，只要加<lable>就可以解决了。）

<form class="layui-form" action=""  lay-filter="form-project">
<div class="project-choose">
<div class="project-choose-list">
<label>
<input type="radio"  onclick="show_project(0)"  lay-filter="checkbox-project"  name="choose"/>
 </label>
 <div class="project-item">
我是第一个div
</div>
</div>
<div class="project-choose-list">
<label>
 <input type="radio"  onclick="show_project(1)"  lay-filter="checkbox-project"  name="choose"/>
 </label>
 <div class="project-item">
 我是第二个div
 </div>
</div>
<div class="project-choose-list">
<label>
<input type="radio"  onclick="show_project(2)"  lay-filter="checkbox-project" name="choose"/>
 </label>
<div class="project-item">
我是第三个div
</div>
</div>
</div>
</form>

2.整体代码，大家可以去这个地方把代码复制进去——https://www.runoob.com/runcode——测试一下。

<html>
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<style>

.project-choose,
.message-choose{
    diasplay: flex;
    justify-content: space-between;
}

.project-choose-list,
.message-choose-list{
    width: 350px;
    float: left;
    margin: 52px
 }

.project-item,
.message-item{
    height: 200px;
    margin-right: 10px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.project-item-choose,    
.message-item-unchoose{
border:1px solid red;

}

</style>
<body>
<form class="layui-form" action=""  lay-filter="form-project">
<div class="project-choose">
<div class="project-choose-list">
<label>
<input type="radio"  onclick="show_project(0)"  lay-filter="checkbox-project"  name="choose"/>
 </label>
 <div class="project-item">
我是第一个div
</div>
</div>
<div class="project-choose-list">
<label>
 <input type="radio"  onclick="show_project(1)"  lay-filter="checkbox-project"  name="choose"/>
 </label>
 <div class="project-item">
 我是第二个div
 </div>
</div>
<div class="project-choose-list">
<label>
<input type="radio"  onclick="show_project(2)"  lay-filter="checkbox-project" name="choose"/>
 </label>
<div class="project-item">
我是第三个div
</div>
</div>
</div>
</form>
<script>
    layui.use('form', function () {
        var form = layui.form;
        form.on('radio(checkbox-project)', function(data){
            if(data.elem.checked){
                $('input[lay-filter="checkbox-project"]').prop('checked',false);
                $(data.elem).prop('checked',true);
            }
            form.render('checkbox','form-project');
        });
    });

   function show_project(id){
       var radio = document.getElementsByClassName('project-item')
       for(var i=0;i<radio.length;i++){
           if(i == id){
               radio[i].className ='project-item project-item-choose '   //定义被选中的div的样子
           }else{
               radio[i].className='project-item  '  //没有被选中的div的样式，如果相加其他的样式只需要在上面的css定义一个样式，然后加入这里面来。
           }
       }
   }
</script>
</body>
</html>

这周也是收获满满的一周呀，冲鸭！

one一piece
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值