3

Em meu projeto, eu possuo funções bem parecidas, com a mesma intenção, porém, como se trata de uma função de troca de classes do DOM (classList.replace), eu acabei fazendo um código muito repetitivo, e gostaria de reduzi-lo para torná-lo reutilizável no futuro. Porém, apesar de várias tentativas com loops como for...if e forEach, eu acabei travando, e por falta de experiência em lógica de programação, pois estudo programação a apenas 6 meses, não consegui.

Eis o código:

handleLeftAnswer() {
    $leftDiv.classList.replace('leftside-div', 'leftside-div-js');
    $centerDiv.classList.replace('centerside-div', 'centerside-div-js-no-display');
    $rightDiv.classList.replace('rightside-div', 'rightside-div-js-no-display');
  }

  handleMidAnswer() {
    $centerDiv.classList.replace('centerside-div', 'centerside-div-js');
    $rightDiv.classList.replace('rightside-div', 'rightside-div-js-no-display');
    $leftDiv.classList.replace('leftside-div', 'leftside-div-js-no-display');
  }

  handleRightAnswer() {
    $rightDiv.classList.replace('rightside-div', 'rightside-div-js');
    $centerDiv.classList.replace('centerside-div', 'centerside-div-js-no-display');
    $leftDiv.classList.replace('leftside-div', 'leftside-div-js-no-display');
  }

O que eu tentei:

handleRightAnswer(rightOne) {
    const options = ['left', 'center', 'right'];
    
    console.log(rightOne);
    switch (rightOne) {
      case rightOne: 'left'; break;
      case rightOne: 'center'; break;
      case rightOne: 'right'; break;
    }


    for (const option of options) {
      const isThisTheRightAnswer = option === rightOne;
      const element = document.querySelector(`.${option}side-div`);
      console.log(element);
      isThisTheRightAnswer ? element.classList.replace(`${option}side-div`, `${option}side-div-js`)
        : element.classList.replace(`${option}side-div`, `${option}side-div-js-no-display`)
    }
  }

Quais os erros que deram nessa tentativa:

  1. rightOne estava voltando como um mouseEvent
  2. Os três elementos estavam atuando em conjunto e trocando suas classes de uma vez só, ao invés de separadamente.
  3. isThisTheRightAnswer estava retornando como false, e eu não consegui decifrar como fazê-lo para retornar true.

Mais uma vez, me perdoem por minha ignorância e falta de prática, eu realmente gostaria de saber como posso trabalhar mais o meu raciocínio lógico para melhorar o meu código futuramente, e eu, um iniciante em programação, conto com a ajuda de vocês para me auxiliar nisso.

1 Resposta 1

2

As partes comuns são:

  • Sempre faz replace nos três elementos:
  • O elemento "em destaque" fica com a class "xxx-div-js" e os demais "xxx-js-no-display"

Portanto, precisa passar um parâmetro que determine se é "left", "center" ou "right".

Poderia fazer assim:

handleAnswer(rightOne) {
    var leftSufix = rightOne == "left" ? "" : "-no-display";
    var centerSufix = rightOne == "center" ? "" : "-no-display";
    var rightSufix = rightOne == "right" ? "" : "-no-display";

    $leftDiv.classList.replace('leftside-div', 'leftside-div-js'+leftSufix);
    $centerDiv.classList.replace('centerside-div', 'centerside-div-js'+centerSufix);
    $rightDiv.classList.replace('rightside-div', 'rightside-div-js'+rightSufix);
}

E usar assim por exemplo: handleAnswer('left');

Poderia também no lugar de mudar só o sufix, por todo o nome da class, mas ideia seria a mesma

Outra possibilidade seria mudar todos para "xxx-div-js-no-display", e com um switch mudar só o que que vier no parâmetro "rightOne" para "xxx-div-js", mas isso faria mais sentido se tivesse várias opções, por exemplo umas 10.

1
  • Puts, algo tão simples e eu tava tentando de resolver das maneiras mais complexas que existem. Obrigado mano!
    – PiviaN
    Commented 26/01/2021 às 1:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .