时间戳

首页 > 解决方案 > 如何在通过循环获得的元素的点击事件上绑定一个类？

javascript - 如何在通过循环获得的元素的点击事件上绑定一个类？

问题描述

我通过一组对象在我的 html 中显示一些可选择的信息框。为此，我在事件单击中绑定了一个类，但是当我通过 v-for 获取元素时，当我选择一个时，它将类绑定到所有元素。

如何仅区分所选的一个？

我已经看到了几个使用 jquery 的示例，但我想知道是否还有其他方法。

我的模板：

<div class="list-services">
  <div class='column-service' 
    v-for='estimation in filteredEstimation' 
    v-bind:key="estimation.name" 
    :class="{ focusService }" 
    @click="focusService = !focusService"
  >
    <div class="service-name">
      {{estimation.name}}
    </div>
    <div class="service-description">
      {{estimation.description}}
    </div>
    <div class="service-price">
      {{estimation.price}} 
      <span class="price-currency">€&lt;/span>
    </div>
  </div>
</div>

非常感谢您的时间和帮助。

标签： javascriptcssclassvue.js

解决方案

我个人使用的方法（如果我正确理解您的问题）是this关键字。

例如：

索引.html

<ul id="myList">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

script.js（原版 JavaScript）

var myList = document.getElementById("myList");
    myList.addEventListener("click", function () {
    console.log(this);
    console.log(this.innerText);
});

脚本.js (jQuery)

var myList = $("#myList").on("click", function() {
    console.log(this);
    console.log(this.innerText);
});

在这种情况下，使用this关键字允许我们li通过仅将事件侦听器附加到父元素来获取被点击元素的 innerText。innerHtml只是使用此关键字的众多方法之一。您可以通过console.log(this)在事件侦听器函数中查看更多内容。

让我知道这是否有帮助！

推荐阅读