js动态给当前点击元素添加css类

1.页面：

2.html代码：

  <div class="project-all"><template v-for='(index,project) in projectData'> <div class="project" v-on:click='projectSelectFun($event,index)'>{{project.projectName}}</div></template><div class="project" v-if='addp' v-on:click='addproject'>新增项目</div><div class="project" v-if='!addp'><input type="text" class='name-input' placeholder='请填写项目名称' v-on:keyup.enter='saveProjectFun' v-el:addProject></div></div>

3.js代码：

<script>
export default {components: {},ready: function() {},methods: {projectSelectFun: function(e,index) {      //标记选中的project,因为selected是动态加载的,所以用el无法拿到当前的dom,因此用querySelectorvar _dom = document.querySelector('.project.selected');if (_dom) {_dom.classList.toggle('selected');//当class为project的元素上没有这个CSS类时，它就新增这个CSS类；如果class为project的元素有了这个CSS类，它就是删除它。就是反转操作。
      }e.target.classList.toggle('selected');this.searchData.params.project = this.projectData[index].id;},},data() {return {addp: true, //是否显示添加项目
      projectData: [{id: '001',projectName: '假数据1'}, {id: '002',projectName: '假数据2'}, {id: '003',projectName: '假数据3'}, {id: '004',projectName: '假数据4'}, {id: '005',projectName: '假数据5'}, {id: '006',projectName: '假数据6'}, {id: '007',projectName: '假数据7'}, {id: '008',projectName: '假数据8'}],typeData: [{id: '1',typeName: '需求'}, {id: '2',typeName: '问题'}],}}
}
</script>

4.实现效果：

并且每次只能选中一个。

转载于:https://www.cnblogs.com/yingzi1028/p/5563791.html

js动态给当前点击元素添加css类相关推荐

点击选中该元素，改变当前点击元素的样式，其他元素样式不变
js方法 1.给元素添加点击事件并传参. onclick = "clickItem( this )" 2.在事件中获取到该item,给item添加css类 , item.cl ...
如何获取当前点击元素的某个子元素
<div onclick="javascript:sqhys(event)"><div id="demochild"></div& ...
Vue中获取当前点击元素的父元素、子元素、兄弟元素
Vue如何获取当前点击元素? 获取父元素.子元素.兄弟元素呢? 通过帮定点击事件: 例如: <button class="shanchu" @click="shan ...
如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件及点击后添加css类样式及点击后路由跳转切换
如何给Vue v-for循环渲染出的元素批量添加点击事件及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件,并以自己在数组中 ...
jquery 点击事件点击元素添加和移除class
jquery 点击事件点击元素添加和移除class 怎么实现点击一个元素给它添加class,再点击一个元素移除上一个元素的class,再给现在点击的元素添加class <div class=&q ...
VUE获取当前点击元素
获取: @click='fn($event)' 使用: fn (event) { console.log(event.currentTarget); // event.currentTarget获取当 ...
js中获取当前点击的li标签以及li标签中a标签的id
可以使用以下代码来获取当前点击的li标签的id: document.querySelectorAll('li').forEach(function(li) {li.addEventListener(' ...
js动态给table表格的行添加删除线
首先,要达到以下的效果而不是在每个tr单元格添加css属性text-decoration,因为删除线要连续不间断. 利用添加一个设置属性了的div去实现 jsp代码: <%@ page lan ...
js、jq获取当前点击元素的下标
以下是原生js方法: //获取到所有的li标签 var li = technical.querySelectorAll("li") //遍历li标签 for (let i = 0; ...

js动态给当前点击元素添加css类

js动态给当前点击元素添加css类相关推荐

最新文章

热门文章