js - rozjaśnienie na elemencie sąsiadującym

pytanie zadane 17 października 2017 w JavaScript przez MTB Użytkownik (690 p.)

Cześć, potrzebuję małej pomocy

Mam 2 buttony. Kiedy kliknę na jednego, to drugi ma mieć opacity: 0.5, a potem odwrotnie.

Struktura:

<div id="boxes">
                    <button type="button" id="firstBtn" onclick="box(this)" ></button>
                    <button type="button" id="secondBtn" onclick="box(this)"></button>
    </div>

W jaki sposób mogę klikając na jeden element nadawać drugiemu opacity: 0.5, a po kolejnym kliknięciu w ten button który miał obniżone opacity ma mieć z powrotem 1,0. Chodzi mi o takie naprzemienne działanie.

4 odpowiedzi

odpowiedź 17 października 2017 przez Drajvon Bywalec (2,250 p.)

            <script>
                let btn1 = document.querySelector("#firstBtn");
                let btn2 = document.querySelector("#secondBtn");
                btn1.addEventListener('click', function(){
                    btn2.style.opacity = '0.5';
                    btn1.style.opacity = '1';
                });
                btn2.addEventListener('click', function(){
                    btn1.style.opacity = '0.5';
                    btn2.style.opacity = '1';
                });
            </script>

komentarz 17 października 2017 przez Drajvon Bywalec (2,250 p.)
edycja 17 października 2017 przez Drajvon

Ewentualnie jeśli chcesz dodać więcej przycisków to:

    <script>
        const buttonList = document.querySelector('#boxes');
        buttonList.addEventListener('click', (e) => {
            hide(e);
        });
        function hide(e) {
            e.stopPropagation();
            let target = e.target;
            let childrenList = Array.from(target.parentNode.children).filter(item => item !== target );
            childrenList.map(item => item.style.opacity = '0.5');          
            target.style.opacity = '1';
        }
    </script>

odpowiedź 17 października 2017 przez sc4rface Dyskutant (7,710 p.)

$(this).next()

$(this).prev()

Oto moja podpowiedź ;)

This dotyczy elementu, na którym został wywołany event.

komentarz 17 października 2017 przez MTB Użytkownik (690 p.)

Chodzi mi o rozwiązanie w czystym javascripcie, a nie jQuery:)

odpowiedź 17 października 2017 przez MTB Użytkownik (690 p.)

podbijam, jakieś propozycje?

1	komentarz 17 października 2017 przez Marchiew Dyskutant (7,690 p.) https://codepen.io/anon/pen/mBabZX Coś takiego zrobiłem. Działa, ale jest bardzo mało wydajne, bo podwójna pętla. Za to działa dla dowolnej ilości przycisków i nie trzeba id podawać :)

komentarz 17 października 2017 przez elwood Gaduła (4,180 p.)

Bez sensu rozwiązanie. Jeżeli będziesz potrzebował 100 takich przycisków to stworzysz 100 listenerów? Klik powinien być dodany do nadrzędnego diva w tym wypadku do <div id="boxes"> Następnie sprawdzasz czy na pewno kliknięto button (nie diva), jeżeli tak to lecisz forEach'em po tych buttonach i ustawiasz odpowiednie classy.

https://jsfiddle.net/gc6tt2ra/

komentarz 17 października 2017 przez Marchiew Dyskutant (7,690 p.)

Wiedziałem od razu jak to powinno wyglądać i że mój skrypt jest bez sensu, ale nie wpadłem na szybko jak to wykonać i napisałem od tak :D

Dzięki za poprawę :)