Help with IF and ELSE in JS

Asked

Viewed 60 times

1

First of all I have to say that I’m starting now to work with JavaScript, I’m sorry if I misspell the name of something or talk some nonsense, come on.

My goal is to have a modal with steps, with buttons Carry on and Come back, i found a reference in which the user shows this perfectly, however, only with the button to continue.

So I created and started trying to make the button Come back work, but to no avail. When I get back to (info_main) and then I click on Carry on, is displayed all the steps together.

// MODAL COM ETAPAS (NEXT or LAST)
$(() => {
  var verifica_etapas = false;          
  $('.color').hide();
  $('.checks').hide();
  $('.modal-footer-etapas').hide();
    
  // CONTINUAR ETAPAS
  $('.next_modal').on('click', () => {
    verifica_etapas = !verifica_etapas;        
        
    if(verifica_etapas) {
      $('.color').show();
      $('.info_principais').hide();
    } else {
      $('.checks').show();
      $('.color').hide();
      $('.modal-footer-etapas').show();
    }
  })
    
  // VOLTAR ETAPAS
  $('.last_modal').on('click', () => {
    verifica_etapas = !verifica_etapas;        
        
    if(verifica_etapas) {
      $('.info_principais').show();
      $('.color').hide();
    } 
  })
})
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<div class="modal fade" id="add_produtos" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content animated flipInX">
      <div class="modal-body">
        <form method="POST">
          <div class="info_principais">
            <h3> Etapa informações principais...</h3>
            <button type="button" class="btn btn-success mt-3 next_modal">CONTINUAR</button>
            <button type="button" class="btn btn-dark mt-3" data-dismiss="modal">FECHAR</button>
          </div>
          <div class="form-group color">
            <h3> Etapa de cores...</h3>
            <button type="button" class="btn btn-success mt-3 next_modal">CONTINUAR</button>
            <button type="button" class="btn btn-dark mt-3 last_modal">VOLTAR</button>
          </div>
          <div class="form-group checks">
            <h3> Etapa de checks...</h3>
            <!--Botão de enviar aparece aqui...-->
          </div>
          <!-- BOTÃO DE ENVIAR! -->
          <div class="modal-footer-etapas">
            <button type="submit" class="btn btn-primary mt-3"> CADASTRAR</button>
            <button type="button" class="btn btn-dark mt-3 last_modal">VOLTAR</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Reference: Click here

  • https://codepen.io/adambui/pen/KmJwdw

  • your code is not functional

  • thanks @Leocaracciolo, with this example, I managed to finish!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.