分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

jquery 单击选中 再次选中取消选中

发布时间:2023-09-06 02:04责任编辑:蔡小小关键词:暂无标签

html:

<div id="full" class=‘weui-popup__container‘ style="background: #fff"> ???????????????<div class="weui-popup__overlay"></div> ???????????????<div class="weui-popup__modal" style="background: #fff;"> ???????????????????<header class=‘demos-header‘> ???????????????????????<h2 class="demos-second-title">筛选参数</h2> ???????????????????</header> ???????????????????<article class="weui-article"> ???????????????????????<section> ???????????????????????????<section class="category"> ???????????????????????????????<h3>潜在需求</h3> ???????????????????????????</section> ???????????????????????????<section class="pay"> ???????????????????????????????<h3>消费能力</h3> ???????????????????????????????<span class="tl-ac-span">A</span> ???????????????????????????????<span class="tl-ac-span">B</span> ???????????????????????????????<span class="tl-ac-span">C</span> ???????????????????????????????<span class="tl-ac-span">D</span> ???????????????????????????????<span class="tl-ac-span">E</span> ???????????????????????????</section> ???????????????????????????<section class="age"> ???????????????????????????????<h3>年龄层次</h3> ???????????????????????????????<span class="tl-ac-span">18-25</span> ???????????????????????????????<span class="tl-ac-span">25-30</span> ???????????????????????????????<span class="tl-ac-span">30-35</span> ???????????????????????????????<span class="tl-ac-span">35-40</span> ???????????????????????????????<span class="tl-ac-span">40-99</span> ???????????????????????????</section> ???????????????????????</section> ???????????????????</article> ???????????????????<a href="javascript:;" class="weui-btn weui-btn_primary close-popup" style="background: #FF5722;" onclick="getSerch();">确定</a> ???????????????</div> ???????????</div>

css:

.tl-span{ ???width: 64px; ???padding: 6px 10px; ???border-radius: 8px; ???border: 1px solid #84A7FF; ???padding-right: 6px;}.tl-span :active{ ???background: #F8A311;}.box { white-space:nowrap; overflow-x:auto; } ???????/*注释1*/.box::-webkit-scrollbar { width:0; height:0; display: none; } ????/*注释2*/.tl-bar{ ???padding: 0 15px; ???height: 60px; ???line-height: 58px;}.left-span{ ???color:#FF5722; ???display:inline-block; ???float: left;}.right-span{ ???color:#FF5722; ???display:inline-block; ???float: right;}.tl-ac-span{ ???display: inline-block; ???width: 22%; ???height: 36px; ???line-height: 36px; ???text-align: center; ???overflow: hidden; ???background: #E7E7E7; ???border-radius: 4px; ??margin-right: 1%;}.active{ ???color: #FF5722; ???background: #FFFFFF; ???border: 1px solid #FF5722;}
//绑定点击选中事件 ???????????????$(".category span").click(function(e){ ???????????????????if(!$(this).hasClass("active")){ ???????????????????????//$(this).addClass("active"); //多选 ???????????????????????$(this).addClass("active").siblings("span").removeClass("active"); //单选 ???????????????????}else{ ???????????????????????$(this).removeClass("active"); ???????????????????} ???????????????????console.log(‘event‘, e.currentTarget.id); ???????????????????let targId= e.currentTarget.id; ???????????????????searchObj.tagCategoryIds = targId; ???????????????}); ???????????????$(".pay span").click(function(e){ ???????????????????//$(this).addClass("active").siblings("span").removeClass("active"); ???????????????????if(!$(this).hasClass("active")){ ???????????????????????//$(this).addClass("active"); //多选 ???????????????????????$(this).addClass("active").siblings("span").removeClass("active"); //单选 ???????????????????}else{ ???????????????????????$(this).removeClass("active"); ???????????????????} ???????????????????let consumeLevels= e.currentTarget.innerText; ???????????????????searchObj.consumeLevels = consumeLevels; ???????????????}); ???????????????$(".age span").click(function(e){ ???????????????????if(!$(this).hasClass("active")){ ???????????????????????//$(this).addClass("active"); //多选 ???????????????????????$(this).addClass("active").siblings("span").removeClass("active"); //单选 ???????????????????}else{ ???????????????????????$(this).removeClass("active"); ???????????????????} ???????????????????let age= e.currentTarget.innerText; ???????????????????searchObj.ageLevels = age; ???????????????});

jquery 单击选中 再次选中取消选中

原文地址:https://www.cnblogs.com/zxyun/p/9316964.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved