更改“点击”的当前按钮背景答案

【问题标题】：Change the "clicked" current button background更改“点击”的当前按钮背景
【发布时间】：2020-10-11 02:04:30
【问题描述】：

当我单击按钮列表中的按钮时，for-loop 中的所有按钮都会更改其背景。我已经在click 上添加了一个方法，并将 CSS 应用到按钮上，但我不知道如何更改仅单击按钮的背景颜色。

App.vue:

<template>
  <div id="app">
    <!-- <button v-on:click="counter += 1">Add 1</button> -->
    <button
      class="button variation colors"
      v-for="(p,index) in varbutss"
      :key="index"
      :id="p.items_id"
      :value="p.color"
      @click="colorclick(p.items_id,p.color)"
    >{{p.color}}</button>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "App",
  methods: {
    colorclick: function(e,color) {
      console.log(e);

      $(".colors").css("background-color", color);
    }
  },
  data() {
    return {
      varbutss: [
        {
          items_id: 1,
          color: "red"
        },
        {
          items_id: 2,
          color: "blue"
        }
      ]
    };
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

https://codesandbox.io/s/optimistic-dijkstra-st34h?file=/src/App.vue

【问题讨论】：

标签： jquery vue.js vuejs2

【解决方案1】：

问题出在这一行：

$(".colors").css("background-color", color);

$(".colors") 代码查找类名为colors 的所有元素。由于每个按钮都被分配了colors 类，所有按钮都被返回，这导致所有按钮具有相同的颜色。

您的click-handler 将按钮 ID 作为第一个参数传递，因此您可以在查询中使用它来限制对该按钮的颜色更改范围。也就是把选择器改成#BUTTONID.colors：

colorclick: function(e, color) {
  $(`#${e}.colors`).css("background-color", color);
}

demo

但是，应该避免 DOM 操作（使用 jQuery），因为如果 Vue 重新渲染组件，这些更改将被覆盖。通常有一种方法可以在不操作 DOM 的情况下重写代码。例如，您可以根据click-handler 设置的变量应用class。

【讨论】：