为什么我不能使用 jQuery 来定位这两个元素？ [复制]答案

【问题标题】：Why am I not able to target both elements with jQuery? [duplicate]为什么我不能使用 jQuery 来定位这两个元素？ [复制]
【发布时间】：2018-06-13 06:13:16
【问题描述】：

我有两个微调器，一个带有边框和一个关键帧动画，另一个是空白的。如果我使用 jQuery 定位两个微调器，则只有空白微调器在工作。

我认为当您将鼠标悬停在元素上时，可能是 ::before 伪元素阻止了“点击”，但正如您在此处看到的那样，这也在第二个微调器上。

什么（其他）可能是问题？

$(".spinner").click(function() {
  $(this).toggleClass("scale");
});

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
}

body {
  background: #ccc;
}

.spinner {
  width: 100px;
  height: 100px;
  background: #E2E2E2;
  border-radius: 50%;
  position: relative;
  margin: 50px;
  display: inline-block;
  transition: transform .2s ease-in-out;
}

.spinner:after,
.spinner:before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.spinner-1 {
  border-left: 2px solid red;
  border-right: 2px solid blue;
  border-top: none;
  border-bottom: none;
  animation: spin-1 1s ease-in-out infinite;
}

@keyframes spin-1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.scale {
  transform: scale(1.1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner spinner-1"></div>
<div class="spinner spinner-2"></div>

【问题讨论】：

因为动画的变换更具体并且覆盖了类的变换......这是一个 XY 问题，您同时针对这两个问题，但问题出在其他地方 [我评论直到找到 dup ，我知道一个...]
重复答案中需要的部分是对规范的引用

标签： jquery html css animation

【解决方案1】：

问题是缩放类定义的transform被第一个元素的类中定义的transform覆盖了。

$(".spinner").click(function() {
  $(this).toggleClass("scale");
});

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
}

body {
  background: #ccc;
}

.spinner {
  width: 100px;
  height: 100px;
  background: #E2E2E2;
  border-radius: 50%;
  position: relative;
  margin: 50px;
  display: inline-block;
  transition: transform .2s ease-in-out;
}

.spinner:after,
.spinner:before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.spinner-1 {
  border-left: 2px solid red;
  border-right: 2px solid blue;
  border-top: none;
  border-bottom: none;
  animation: spin-1 1s ease-in-out infinite;
}

@keyframes spin-1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.scale {
  transform: scale(1.1);
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner spinner-1"></div>
<div class="spinner spinner-2"></div>

这个问题可以通过添加一个额外的css规则来解决：

$(".spinner").click(function() {
  $(this).toggleClass("scale");
});

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
}

body {
  background: #ccc;
}

.spinner {
  width: 100px;
  height: 100px;
  background: #E2E2E2;
  border-radius: 50%;
  position: relative;
  margin: 50px;
  display: inline-block;
  transition: transform .2s ease-in-out;
}

.spinner:after,
.spinner:before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.spinner-1 {
  border-left: 2px solid red;
  border-right: 2px solid blue;
  border-top: none;
  border-bottom: none;
  animation: spin-1 1s ease-in-out infinite;
}

@keyframes spin-1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes spin-1-scaled {
  from {
    transform: scale(1.1) rotate(0deg);
  }
  to {
    transform: scale(1.1) rotate(360deg);
  }
}

.scale {
  transform: scale(1.1);
}
.scale.spinner-1 {
  animation: spin-1-scaled 1s ease-in-out infinite;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner spinner-1"></div>
<div class="spinner spinner-2"></div>

【讨论】：

谢谢！我什至没有想到转换属性会覆盖已经存在的转换属性。我知道您需要将所有转换实现为一个属性，但我没有想到 :)

【解决方案2】：

您的问题与转换有关。

我为您的代码创建了一个 jsfiddle：

https://jsfiddle.net/ethanryan/w3tkyuar/

并在 css 中将 background-color: green 添加到 .scale：

.scale {
  transform: scale(1.1);
  background-color: green;
}

正如您在点击时看到的那样，每个微调器都会将颜色变为绿色。

所以问题不在于 toggleClass。

如果您注释掉 @keyframes spin-1，您会看到 .scale 有效。

【讨论】：