<div class="layui-inline" id=‘’   onclick="changeType(id)">
                <label class="layui-form-label"></label>
              </div>

function changeType(id){//id是通过绑定事件传过来的
            var askclass = document.getElementById('askclass'+id);//采取拼接方式获取当前点击的哪一个元素
            var askclassParsent=askclass.parentNode; //获取当前父级分类
            var askclassChriden=askclassParsent.children//获取父元素下的所有子元素
             for(var i=0;i<askclassChriden.length;i++){//循环所有子元素
                if(askclassChriden[i]==askclass){//如果点击的是当前子元素
                  askclassChriden[i].classList.add("select")//添加class样式
                }else{
                askclassChriden[i].classList.remove("select") //不是的话就移除其他子元素的样式
                }
                }
            
            }

js动态绑定class(当前父级div下的子元素有没有这个class,有的话移除,没有的话添加)的更多相关文章

  1. JS关闭当前父级div

    代码: <img src="img/diagram.png" onclick="javascript:this.parentNode.parentNode.remo ...

  2. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  3. <转载>如何解决子级用float浮动父级div高度不能自适应的问题

    转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内 ...

  4. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  5. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  6. js获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度

    摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测 ...

  7. 子级div相对于父级div位置不变

    设置父级div为相对位置 设置子级div为绝对位置 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  8. 同级div设置display:inline-block,父级div强制不换行

    同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...

  9. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

随机推荐

  1. 🏃‍♀️点亮你的Vue技术栈,万字Nuxt.js实践笔记来了~

    前言 作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮. Nuxt.js 是什么 Nuxt.js 官方介绍: Nuxt.js 是一个基于 Vue.js 的通用 ...

  2. Angular 初体验

    事情起源当初一个简单的截屏然后推流出去的工具,这个工具当初我用winform简单实现了下,然后因公司业余,添加许多程序包,需要自动管理这些程序包,包含下载更新上传等,以及与后台交互,学生老师提醒,自动 ...

  3. phantomJS安装出错解决办法

    解决办法:https://github.com/xhlwill/blog/issues/11

  4. python datetime 转timestamp

    import datetime import time d1=datetime.date.today() t1=time.mktime(d1.timetuple()) d2=datetime.date ...

  5. RBAC权限分配

    RABC:基于角色的权限访问控制(Role-Based Access Control) 一般在登录系统认证通过后,会先确定的该用户的操作权限,判断用户的后续操作是否合法! RABC至少需要三张表:用户 ...

  6. dTree

    1.dtree.js源码 /*--------------------------------------------------| | dTree 2.05 | www.destroydrop.co ...

  7. Hyperledger Fabric开发(一):环境配置

    macOS系统下配置hyperledger fabric环境 cURL mac中自带curl,如果需要下载最新版本,则可按照以下命令,并将路径添加在系统环境变量的最前面即可 brew install ...

  8. 【MySQL】深入理解MySQL锁和事务隔离级别

    先看个小案例: 话不多说,上案例,先创建一个表 mysql> CREATE TABLE IF NOT EXISTS `account`( `id` INT UNSIGNED AUTO_INCRE ...

  9. Android常用五大布局

    一.说明 1.每个应用程序都默认包含一个主界面布局文件(.xml). 2.位于项目的app/src/main/res/layout目录. 3.宽度和高度的属性 match_parent:强制性的使使徒 ...

  10. switch下返回各类的数值

    定义一个变量,在每个case下赋值,最后return public static int orderDishes(int choice) { int price = 0; switch (choice ...