javascript - 在纯 JS 中，我试图设置两个相似但编号不同的类，或者将同一个类设置为两个不同的元素

Question

我试图将相同的类 imagens-giratorias 设置为两个元素或设置 imagens-giratorias 和 imagens-giratorias-2。该类在第一个元素中工作，同一个类在第二个元素中停止动画。

[我在最后提供了 JSFiddle。]

检查 @rafaelcastrocouto的原始代码在 https://stackoverflow.com/a/59524483/8041366 .如果你更喜欢在这里阅读完整的代码，这里是从那里获取的代码，但有一点修改:

var counter = 1;
var div = document.querySelector('.imagens-giratorias');
var imagens = document.querySelectorAll('.imagens-giratorias img');

var showNext = function () {
  counter++;
  if (counter > 3) counter = 1;
  div.classList.remove('imagem1', 'imagem2', 'imagem3')
  div.classList.add('imagem'+counter);
};

for (var img of imagens) {
  img.addEventListener('animationend', showNext);
}

和小的 CSS 片段:

<div class="section-2">
  <div class="item-2">
    <div class="imagens-giratorias imagem1">
    </div>
  </div>
</div>

<div class="section-3">
  <div class="item-2">
    <div class="imagens-giratorias imagem1">
    </div>
</div>

或者

<div class="section-3">
  <div class="item-2">
    <div class="imagens-giratorias-2 imagem1">
    </div>
</div>

• 第一个解决方案，我指的是上面相同的原始代码。

• 第二种解决方案:

var div = document.querySelector('.imagens-giratorias, .imagens-giratorias-2');
var imagens = document.querySelectorAll('.imagens-giratorias img, .imagens-giratorias-2 img');

• 第三个解决方案

var div = document.querySelector('[class^=imagens-giratorias]');
var imagens = document.querySelectorAll('[class^=imagens-giratorias] img');

• 第四个解决方案

const contador = 1;
const div = document.querySelector('.imagens-giratorias');
const imagens = document.querySelectorAll('.imagens-giratorias img');

我也尝试使用 from multiple selectors with document.querySelectorAll .没有运气。

但是所有这些解决方案都不起作用。

JSFiddle

请注意两个要素。虽然一个元素将始终具有动画效果，但另一个元素将停止动画。

https://jsfiddle.net/gusbemacbe/mbp84u6r/2/

Answer 1

如果我对您的理解正确，您正在尝试获取类名以 imagens-giratorias 开头的元素。如果是这种情况，请使用 ^ attribute selector如下图:

document.querySelectorAll("[class^="imagens-giratorias"]")

更新:

根据您的更新，似乎您的两个 div 图像中只有一个是动画的，但实际上它们是堆叠在一起的。随意使用您想要的任何布局方法，但为了演示，我将一个向左浮动，另一个向右浮动。其他的是循环遍历你的 div 并将你的函数分配给它们的子图像:

var divs = document.querySelectorAll('.imagens-giratórias');
var contador = 1;

var mostrarPróximo = function(div) {
  contador++;
  if (contador > 3) contador = 1;
  div.classList.remove('imagem1', 'imagem2', 'imagem3')
  div.classList.add('imagem' + contador);
};


Array.from(divs).forEach(function(div, index) {
  var images = div.querySelectorAll('img');

  Array.from(images).forEach(function(img) {
    img.addEventListener('animationend', mostrarPróximo.bind(null, div));
  });
});

https://jsfiddle.net/1r6yjf5s/