Question

我正在尝试跟踪轮播的中心，在循环时可以动态地完全替换元素。考虑到完整元素的替换，仅观察索引的变化并添加一个active类会在转盘已经移动之后应用样式和过渡时造成一阵混乱，从而产生不良效果。

为了克服这个问题，我决定使用CSS来定位3个元素中的第2个元素，以便无论更改如何发生，都应始终通过css定位3个元素的中心。但是，由于我通过JavaScript更改目标元素集时第n个子元素似乎没有重新计算，因此无法按预期工作。

我简化了该示例，发现使用JavaScript更改nth-child元素集时，似乎并未重新计算我正在使用的active css规则。

例如：

五个元素的集合，其中三个元素具有附加的active类。始终将nth-child(3n+2)定位为三个活动班级的中间人。

按下按钮时，javascript函数将删除第一个活动类，并将其应用于下一个非活动元素。

预期：新的中心元素应由nth-child CSS选择器选择实际：css规则仍然适用于同一元素，并且不会使用应作为新位置的内容进行更新。

从外观上看，效果如下：

在按下按钮之前：

按下按钮后：

这是我的测试用例代码，这很简单，因为我可以得到它，并准确复制我在实际案例中看到的行为。

// extremely crude but always have 3 active blocks and shift them by 1 on each button press, n.b. it doesn't wrap so it'll just break if you go off the end.
nav = e => {
  var active = document.querySelectorAll('.stuff.active');

  var first = active[0];
  var last = active[2];
  first.classList.remove('active');

  document.querySelector('.active + :not(.active)').classList.add('active');

}

.list-of-stuff {
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.stuff {
  flex-grow: 1;
  background-color: blue;
}

.active {
  background-color: green;
}

.active:nth-child(3n+2) {
  background-color: red;
}

button {
  display: block;
  background: orange;
  color: white;
  border: 0;
  outline: 0;
  padding: 10px 15px;
  margin-bottom: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <button onclick="nav()">go</button>

  <div class="list-of-stuff">
    <div class="stuff active"></div>
    <div class="stuff active"></div>
    <div class="stuff active"></div>
    <div class="stuff"></div>
    <div class="stuff"></div>
    <div class="stuff"></div>
    <div class="stuff"></div>
    <div class="stuff"></div>
    <div class="stuff"></div>
    <div class="stuff"></div>
  </div>

</body>

</html>

实时示例：

https://jsbin.com/qeyoyux/edit?html,css,js,console,output

通过JavaScript更新类时，第n个子选择器无法正确应用

0 个答案: