在纯 JS 中，我试图设置两个相似但具有不同数字的类，或者将同一个类设置为两个不同的元素

Question

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

[我在最后提供了 JSFiddle。]

在https://stackoverflow.com/a/59524483/8041366查看@rafaelcastrocouto的原始代码。如果您更喜欢在此处阅读完整代码，这里是从那里获取的代码，但稍作修改：

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 sn-p：

<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');

我也尝试使用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/