为什么获取不到获取当前点击的buttton的兄弟节点_JavaScript_论坛

为什么获取不到获取当前点击的buttton的兄弟节点

黄***得分类：JavaScript 人气：872 回帖：4 发布于6年前收藏

<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？

标签：vue.js javascript

讨论这个帖子（4）垃圾回帖将一律封号处理……

Lv6 码匠

小***技 Web前端工程师 6年前#1

你都用vue了，为什么还要document.getElementById()?

Lv1 新人

鬼***5 UI设计师 6年前#2

因为你for的是div 而不是button

Lv6 码匠

雾***n 页面重构设计 6年前#3

<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哪有同级的兄弟节点？

Lv6 码匠

qx***23 Linux系统工程师 6年前#4

你是想做什么功能呢？想获取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
       }
    });
}

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取