Dwa buttony i trzy funkcje. Jak to ogarnąć?

Odpowiedz Nowy wątek
2019-02-10 20:53
0

Cześć :D
Mam pewien problem i każde jego rozwiązanie które sam
produkuje jest długie, nieczytelne i nie działa.
Dla tego zwracam się z tym do Was!
Oto problem:

Mam dwa przyciski. Przycisk A i przycisk B. Mam trzy funkcje A, B i X.
Przy włączeniu programu ustawiłem eventHandlery ('click') dla przycisku A funkcja A, a dla przycisku B funkcja B.
Proste.
Ale sprawa się komplikuje.
Po kliknięciu przycisku A lub B jego napis(wartość) powinnna zmienić się na "powrót" a eventHandler na funkcje X.
Gdy po naciśnięciu A kliknę na B to napis przycisku B powinna być "powrót" a handler X
a przycisk A powinien wrócić do swojego pierwotnego napisu i eventHandlera.
W sytuacji B następnie A analogicznie.
Przy naciśnięciu A następnie A lub B następnie B powrót do stanu pierwotnego.

Jak to ładnie napisać ?

Pozostało 580 znaków

2019-02-10 22:18

To może coś takiego JSFiddle:

class HandlerManager {
    constructor() {
        this.elements = [];
        this.handleClick = this.handleClick.bind(this);
    }

    bind(element, handlerA, handlerB) {
        this.elements.push({
            handlerA: this.decorateHandlerA(handlerA).bind(this),
            handlerB: this.decorateHandlerB(handlerB).bind(this),
            internalElement: element,
            state: 0
        });

        element.addEventListener('click', this.handleClick);
    }

    handleClick(e) {
        const element = this.findElement(e.target);
        element.state = element.state ^ 1;

        if (element.state) {
            element.handlerA(e);    
        } else {
            element.handlerB(e);
        }
    }

    decorateHandlerA(handlerA) {
        return (e) => {
            handlerA(e);

            e.target.innerText = e.target.dataset.textB;

            this.resetOtherElements(e.target);
        }
    }

    decorateHandlerB(handlerB) {
        return (e) => {
            handlerB(e);

            e.target.innerText = e.target.dataset.textA;
        }
    }

    findElement(element) {
        return this.elements.find(({ internalElement }) => internalElement === element);
    }

    resetOtherElements(element) {
        this.elements
            .filter(({ internalElement, state}) => internalElement !== element && state)
            .forEach(element => {
                element.state = 0;
                element.internalElement.innerText = element.internalElement.dataset.textA;
            });
    }
}

const aBtn = document.getElementById('a');
const bBtn = document.getElementById('b');
const cBtn = document.getElementById('c');
const manager = new HandlerManager();
manager.bind(aBtn, () => alert('A first handler'), () => alert('A second handler'));
manager.bind(bBtn, () => alert('B first handler'), () => alert('B second handler'));
manager.bind(cBtn, () => alert('C first handler'), () => alert('C second handler'));
edytowany 6x, ostatnio: Desu, 2019-02-10 22:28
@adams0: ciekawe masz te problemy :D Co tam tworzysz? - Desu 2019-02-10 22:32
Apke do nauki języków obcych :D - adams0 2019-02-10 22:33
Najs, jak skończysz to pingnij mnie, chętnie zobaczę :) - Desu 2019-02-10 22:34

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0