为什么我无法使用jQuery来定位这两个元素？

Question

我有两个微调器，一个带边框和一个关键帧动画，另一个空白。如果我使用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>

Answer 1

问题是由scale类定义的transform被第一个元素的类中定义的transform覆盖。

＆＃13;

＆＃13;

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

＆＃13;

*,
*::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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

*,
*::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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的问题与转换有关。

我创建了一个代码的jsfiddle：

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

并在css中添加了背景颜色：绿色到.scale：

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

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

所以问题不在于toggleClass。

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