In pure JS, I am trying to set two similar classes but with different numbers or to set the same class to two different elemnts

Question

I tried to set the same class imagens-giratorias to two elements or to set imagens-giratorias and imagens-giratorias-2. The class worked in first element, and the same class stopped of animating in the second element.

[I provide the JSFiddle at the end.]

Check the @rafaelcastrocouto's original code at https://stackoverflow.com/a/59524483/8041366. If you prefer reading the complete code here, here is the code taken from there, but with a bit modified:

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

And small CSS snippet:

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

Or

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

1st solution, that same original code above I am referring.
2nd solution:

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

3rd solution

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

4th solution

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

I also tried to use from multiple selectors with document.querySelectorAll. No luck.

But all these solutions did not work.

JSFiddle

Please pay attention to two elements. While one element will always animate, another will stop of animating.

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

Where is the rest of your code? – symlink Dec 31 '19 at 00:33 — symlink, Dec 31 '19 at 00:33

Carl Edwards · Accepted Answer · 2019-12-31T02:18:56.150

1

If I understand you correctly you're trying to grab elements that have a class name starting with imagens-giratorias. If that's the case, use the ^ attribute selector as shown below:

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

Update:

Based on your update it appears that only one of your two divs' images is animating but in reality they're stacked on top of each of other. Feel free to use whatever layout method you want but for demonstration's sake I floated one left and the other right. Other that it was a matter of looping through your divs and assigning your function to their child images as so:

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/

edited Dec 31 '19 at 02:18

answered Dec 31 '19 at 00:35

Carl Edwards

13,826
11
57
119

I have tested with your answer... While it works on one element, but stops of animating on another element. – Oo'- Dec 31 '19 at 00:44
Can you tell me again what you're trying to accomplish? – Carl Edwards Dec 31 '19 at 00:45
I was trying to set the same script to the same classe for two elements. I will provide the JSFiddle. – Oo'- Dec 31 '19 at 00:48
Done, @carl-edwards. The JSFiddle code snippet is at the end of the description. – Oo'- Dec 31 '19 at 00:53
Okay so you want both to revolve simultaneously? – Carl Edwards Dec 31 '19 at 01:25
Yes, will it work? Or do I need to separate two different classes for each script? – Oo'- Dec 31 '19 at 01:28
Ah I see. So you're using `querySelector`, which will select the first matching element in the DOM. Try using `querySelectorAll` and looping them. – Carl Edwards Dec 31 '19 at 01:32
Testing with it, both elements stop of animating. Check https://jsfiddle.net/gusbemacbe/mbp84u6r/7/. – Oo'- Dec 31 '19 at 01:44
Interesting, I have never heard `Array` and `bind`. I used only `forEach`. But thank you for introducing `Array` and `bind`! But what is that `index`? According IDE's lint: «'index' is declared but its value is never read.» – Oo'- Dec 31 '19 at 02:13
Right. It's an optional parameter for `forEach`. It's the current index of the iterated element. – Carl Edwards Dec 31 '19 at 02:15

In pure JS, I am trying to set two similar classes but with different numbers or to set the same class to two different elemnts

JSFiddle

1 Answers1