Automatycznie dodawanie klasy i jej usunięcie

pytanie zadane 4 lipca 2016 w JavaScript przez Ardian Początkujący (290 p.)

Witam , potrzebuję uzyskać efekt do takiego kodu :

<div class="box">
    <div class="item">content</div>
    <div class="item">content</div>
    <div class="item">content</div>
</div>

Klasa item domyślnie w CSS jest " display : none " . Chcę żeby automatycznie co 10 sekund skrypt napisany w JavaScript ewentualnie jQuery dodawał klase " active z parametrem display:block". Czyli iteracja po elementach z klasa item , po przejsciu z 3 elementu przejscie do 1. Siędzę już przy tym drugi dzień i nie mogę sobie poradzić , poradniki z youtube przejrzałem i próbowałem i wymiękam na tą chwilę. Ktoś pomoże , wytłumaczy jak to zrobic ?

komentarz 4 lipca 2016 przez Ehlert Ekspert (212,790 p.)

Chcesz dodawać klasę? Nie lepiej zmienić css korzystając z Js'a?

komentarz 4 lipca 2016 przez kubaapk Nałogowiec (44,270 p.)

Lepiej jednak dodawać klasy niż stylować przez js ;)

komentarz 4 lipca 2016 przez Ardian Początkujący (290 p.)

przez JSa ma się odbywać tylko automatyczne dodawanie klasy a po 10 sekundach powinno tę klasę usunąć i dodać do kolejnego elementu , coś jak slider to będzie wyglądać , no i dodam nie chcę pluginów , chciałbym zrozumieć działanie takiej pętli , jestem zmęczony już po 2 dniach myślenia , dopiero się uczę JS i szukam pomocy. Masa tutków jest z samymi <img> albo z navigacja <ul> <li> próbowałem to samo zrobić ale iterować po divach no i klapa. Chciałbym się dowiedzieć czy da się a pewnie się da i jeżeli ktoś jest chętny to proszę wytłumaczyć jak to działa . Dziękuje :D

4 odpowiedzi

odpowiedź 4 lipca 2016 przez kubaapk Nałogowiec (44,270 p.)

odpowiedź 4 lipca 2016 przez Ehlert Ekspert (212,790 p.)

odpowiedź 4 lipca 2016 przez Magicone Nałogowiec (45,100 p.)

(function() {
  'use strict';

  var boxElement = document.querySelector('.box');
  var currentElement = 0;

  function changeActive() {
    boxElement.children[currentElement].classList.add('active');
    setTimeout(function() {
      boxElement.children[currentElement].classList.remove('active');
      currentElement = (currentElement + 1) % boxElement.children.length;
      
      changeActive();
    }, 10e3);
  }
})();

Całość opakowana w IIFE, żeby zmienne nie przechodziły do scope globalnego. Do zmiennej boxElement przypisujesz box, który zawiera zmieniające klasę divy. Zmienna currentElement oznacza po prostu pozycję aktywnego elementu. Wywołana funkcja changeActive przypisuje klasę active do elementu oznaczonego przez zmienną currentElement, a po 10 sekundach zdejmuje z niego tę klasę, przekazując ją następnemu. Całość jest powtarzana cyklicznie. ;)