Wybieranie elementu na podstawie wartości atrybutu class i zmiana jego wartości.

pytanie zadane 5 października 2017 w JavaScript przez dziedziu Początkujący (370 p.)

Cześć.

Na swojej witrynie chciałem, aby pewna klasa (inna w zależności od dnia tygodnia) zmieniała się na inną klasę. Każda klasa posiada dwa elementy. Niestety, nie potrafię zmienić klasy dla obu tych. W case 1 zmienia się tylko wartość klasy pierwszego elementu tablicy wybranych elementów klasy pon. W case 2 rozwiązanym za pomocą pętli, sytuacja wygląda tak samo (czemu nie ma się co dziwić, skoro poprzedni przypadek nie zadziałał. W case 3 myślałem, że być może pomoże ponowne wybranie elementu na podstawie wartości atrybutu class, jednak to również nie zadziałało. Pomogła ostatecznie zmiana atrybutu class na inny (case 4) jednak nie jestem zadowolony z takiego rozwiązania. Czy jest jakiś sposób na zmianę atrybutu class więcej niż jednego elementu w takim przypadku? Poniżej kod. Pozdrawiam

var today=new Date();
var day=today.getDay();

switch(day)
{
   case 1:
   {
       var dayToday = document.getElementsByClassName('pon');
       dayToday[0].className='dzien';
       dayToday[1].className='dzien';
   }
   break;
   case 2:
   {
       var dayToday = document.getElementsByClassName('wt');
       for (var i = 0; i<2; i++)
       {
       dayToday[i].className='dzien';
       }
   }
   break;
   case 3:
   {
       var dayToday = document.getElementsByClassName('sr');
       dayToday[0].className='dzien';
       var dayToday = document.getElementsByClassName('sr');
       dayToday[1].className='dzien';
   }
   break;
   case 4:
   {
       var dayToday = document.getElementsByClassName('czw');
       dayToday[0].className='dzien';
       var dayToday = document.getElementsByClassName('czwa');
       dayToday[1].className='dzien';
   }
   break;
   case 5:
   {
       var dayToday = document.getElementsByClassName('pt');
       dayToday[0].className='dzien';
       dayToday[1].className='dzien';
   }
   break;
}

komentarz 5 października 2017 przez xmentor Nałogowiec (49,520 p.)

A pokaż jeszcze HTML

komentarz 5 października 2017 przez dziedziu Początkujący (370 p.)

Pewnie bez sensu cały kod, więc wrzucam fragmenty którego to dotyczy.

<body>

...

            <article class="otwarcie">
                ...
                <table class="godziny">
                    <tr><td colspan="2"><strong>Godziny otwarcia:</strong></td></tr>
                        <tr class="pon"><td>poniedziałek</td>    <td>08:30–15:30</td></tr>
                        <tr class="wt"><td>wtorek</td>    <td>09:00–17:00</td></tr>
                        <tr class="sr"><td>środa</td>    <td>08:30–15:30</td></tr>
                        <tr class="czw"><td>czwartek</td>    <td>08:30–15:30</td></tr>
                        <tr class="pt"><td>piątek</td>    <td>08:30–15:30</td></tr>
                </table><br />
                ...
            </article>

            <main>

                <article class="content">
                    ...
                    <section id="kontakt">
                        ...
                        <p><table class="godziny">
                            <tr><td colspan="2"><strong>Godziny otwarcia:</strong></td></tr>
                                <tr class="pon"><td>poniedziałek</td>    <td>08:30–15:30</td></tr>
                                <tr class="wt"><td>wtorek</td>    <td>09:00–17:00</td></tr>
                                <tr class="sr"><td>środa</td>    <td>08:30–15:30</td></tr>
                                <tr class="czwa"><td>czwartek</td>    <td>08:30–15:30</td></tr>
                                <tr class="pt"><td>piątek</td>    <td>08:30–15:30</td></tr>
                        </table></p>
                        ...
                    </section>
                </article>

                <div style="clear:both;"></div>

            </main>



    </div>
    <script src="dzien.js"></script>
</body>

komentarz 5 października 2017 przez xmentor Nałogowiec (49,520 p.)

Dodawaj klasy używając:

element.classList.add('className');

komentarz 5 października 2017 przez dziedziu Początkujący (370 p.)

Super, śmiga :) a mógłbyś mi jeszcze proszę powiedzieć czemu to co napisałem nie działało?

komentarz 5 października 2017 przez shotokan Nałogowiec (39,660 p.)

Też jestem ciekawy dlatego, że mi powyższy kod działa, tzn. ten js, do mojego htmla i na pierwszy rzut oka się zdziwiłem, że autorowi nie działa. Tyle, że ja to robiłem za pomocą funkcji, a potem się odpowiednią funkcję wywoływało i już.

komentarz 5 października 2017 przez xmentor Nałogowiec (49,520 p.)

getElementsByClassName

Zaraca żywą kolekcje.

Po zmianie klasy dla pierwszego elementu kolekcja się aktualizuje i zostaje w niej jeden element. Musiałbyś się odwołać znowu do pierwszego([0]).

Jakbyś zrobił tak:

element.className = element.className + ' newClass';

to nie byłoby problemu.

komentarz 5 października 2017 przez shotokan Nałogowiec (39,660 p.)

Racja, u mnie działało, ale dlatego, że klasę zmieniałem tylko raz, a potem szedł "reset" i wszytko było od nowa.

komentarz 5 października 2017 przez dziedziu Początkujący (370 p.)

O, super, dobrze wiedzieć, nie pomyślałbym że od razu się to aktualizuje. Dzięki wielkie, miłego dnia! :)

komentarz 5 października 2017 przez xmentor Nałogowiec (49,520 p.)

Polecam również zapoznać się z querySelector i querySelectorAll

komentarz 5 października 2017 przez shotokan Nałogowiec (39,660 p.)

a nie lepsze jQuery?

komentarz 5 października 2017 przez xmentor Nałogowiec (49,520 p.)

Jeśli do niczego innego nie potrzebujemy jQuery to nie.

komentarz 5 października 2017 przez shotokan Nałogowiec (39,660 p.)

Ok, dzięki, fakt, biblioteka trochę waży

Wybieranie elementu na podstawie wartości atrybutu class i zmiana jego wartości.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci