<template>
<div>
<div v-for="(item,index) in vote" :key="index">
<button @click="dovote(index,item.count,$event)">点击投票{{index+1}}</button>数量:{{item.count}}
</div>
<ul>
<li id="firstli" @click="getele">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</template>
<script>
export default{
data:function(){
return {
vote:[{
id:1,
count:1
},{
id:2,
count:2
},{
id:3,
count:3
},{
id:4,
count:4
}],
}
},
methods:{
dovote(i,c,e){
this.vote[i].count++;
console.log(e.target);
let siblings=this.siblings(e.target);
console.log("-------------------"+siblings);
// console.log( e.target.siblings());
// e.target.siblings().style.disabled=true;
},
siblings(elem) {
var a = [];
var b = elem.parentNode.children;
for(var i =0;i<b.length;i++) {
if(b[i] !== elem) {a.push(b[i])};
}
return a;
},
getele(){
let ele = document.getElementById("firstli");
console.log(ele);
let ss = this.siblings(ele);
console.log(ss);
for(let i =0;i<ss.length;i++){
// console.log(ss[i]);
ss[i].style.color='red';
}
}
}
}
</script>
<style lang="less" scoped>
</style>
我写了ul 点击第一个li是可以获取到其他的li的
我不知道为什么上面那个button点击就获取不到其他的button?
<div v-for="(item,index) in vote" :key="index">
<button @click="dovote(index,item.count,$event)">点击投票{{index+1}}</button>数量:{{item.count}}
</div>
//遍历出来以后=>
<div>
<button>点击投票{{index+1}}</button>数量:{{item.count}}
</div>
<div>
<button>点击投票{{index+1}}</button>数量:{{item.count}}
</div>
<div>
<button>点击投票{{index+1}}</button>数量:{{item.count}}
</div>
<div>
<button>点击投票{{index+1}}</button>数量:{{item.count}}
</div>
div
遍历出多个,但是每个div
里都只有一个button
,button
哪有同级的兄弟节点?
你是想做什么功能呢?想获取dom,可以用refs
,但是建议最好不要操作dom,可以有其他实现方式的,事件里传的参数$event并不是dom节点,你console.log
一下e就知道了。
你想实现的功能可以用数据来驱动,建议使用vue先改变一下jquery思想,本身vue就是一个轻量级框架,例子如下
修改模板
<div>
<div v-for="(item,index) in vote" :key="index">
/*给button绑定disabled属性,取消传参$event*/
<button @click="dovote(index,item.count)" :disabled="item.disabled">点击投票{{index+1}}</button>数量:{{item.count}}
</div>
<ul>
<li id="firstli" @click="getele">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
修改数据结构,增加disabled属性
data: {
vote:[{
id:1,
count:1,
disabled:false
},{
id:2,
count:2,
disabled:false
},{
id:3,
count:3,
disabled:false
},{
id:4,
count:4,
disabled:false
}],
},
修改方法
dovote(i,c){
this.vote[i].count++;
this.vote.map((v,index)=>{
if(index!=i){
v.disabled=true
}
});
}