代码之家 › 专栏 › 技术社区 › Ari

使用“this”单击时将类切换为元素

vue.js jquery javascript

0

Ari · 技术社区 · 6 年前

我有一个元素,它没有ID。

<div class='classA' v-on:click='addClassB(this)'></div>

当您单击它时,我希望添加或删除一个类(如果它已经存在),它将调用此函数:

methods: {
    addClassB: function () {
        this.classList.toggle("classB");
    }
}

这显然不起作用,我希望能够在该项上切换“ClassB”,因为我可以有类似这样的内容:

<div class='classA' v-on:click='addClassB(this)'></div>
<div class='classA' v-on:click='addClassB(this)'></div>
<div class='classA' v-on:click='addClassB(this)'></div>

所以当一个被点击的时候,我不希望他们都添加了ClassB,只需要点击一个。

我也在使用Vue。

2 回复 | 直到 6 年前

1

3

Terry 6 年前

只需访问 event target from the method itself :

methods: {
    addClassB: function (event) {
        event.target.classList.toggle("classB");
    }
}

因此不再需要将任何参数传递给处理程序:

<div class='classA' v-on:click='addClassB'></div>

见以下概念证明示例:

new Vue({
  el: '#app',
  methods: {
    addClassB(event) {
      event.target.classList.toggle('classB');
    }
  }
});

#app {
  display: flex;
}
#app div {
  width: 50px;
  height: 50px;
  margin: 10px;
}
.classA {
  background: red;
}
.classB {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="classA" v-on:click="addClassB"></div>
  <div class="classA" v-on:click="addClassB"></div>
  <div class="classA" v-on:click="addClassB"></div>
</div>

2

0

Beniamin H Sai Sudha 6 年前

而不是使用 this 使用 event.target . 来自VUE DOC https://vuejs.org/v2/guide/events.html#Method-Event-Handlers :

greet: function (event) {
  // `this` inside methods points to the Vue instance
  alert('Hello ' + this.name + '!')
  // `event` is the native DOM event
  if (event) {
    alert(event.target.tagName)
  }
}

在您的代码中:

methods: {
    addClassB: function (event) {
        event.target.classList.toggle("classB");
    }
}

还有:

<div class='classA' v-on:click='addClassB'></div>