1. 程式人生 > 其它 >js選項卡多選,再次點選刪除,選項卡變色

js選項卡多選,再次點選刪除,選項卡變色

技術標籤:uniapp移動端javascriptvueuni-appjs

js選項卡多選,再次點選刪除,選項卡變色

在這裡插入圖片描述

js部分

redio_cli(e,ind){
	this.xuanx.push(e)
	console.log(this.xuanx)
	let list = []
	for (var i = 0; i < this.xuanx.length; i++) {
		for (var o = 0; o < this.xuanx.length; o++) {
			if(i != o && this.xuanx[i] == this.xuanx[o]){
				list.push(this.xuanx[i])
				// console.log(list)
			}
		}
	}
	// console.log(list)
	// 判斷重複刪除
	for (var i = 0; i < this.xuanx.length; i++) {
		for (var o = 0; o < list.length; o++) {
			if(i != o && this.xuanx[i] == list[o]){
				this.xuanx.splice(i)
				//上傳的資料格式
				let arr = ''
				this.xuanx.forEach(it=>{
					arr += it+','
					this.xuanx_zj = arr.substr(0,arr.length -1)
				})
			}
		}
	}
	//按鈕變色
	if (this.xuanxind.indexOf(ind) == -1) {
		this.xuanxind.push(ind);//選中新增到數組裡
		console.log(this.xuanxind)
	} else {
		this.xuanxind.splice(this.xuanxind.indexOf(ind), 1); //取消
	}
}

html

<view :class="xuanxind.indexOf(ind) != -1 ?'act' : 'yuan'" 
v-for="(it,ind) in redio" :key="ind" @click="redio_cli(it,ind)">
	{{it}}
</view>