Replace If / else with Case javascript

4

I would like to replace the if / else with Case because I believe it will be better for understanding the code since it will be a little long, but I can not access the Array that will have the conditions to activate the actions. Is the error in code or logic?

ex:

window.onscroll = function animaMenu() {
    var menu = [pageYOffset > 70 , pageYOffset > 800 ];
    switch (menu) {
        case 0:
            var x = document.getElementById("nav").className = "navegacao-movel"
        break
        case 1:
            var x = document.getElementById("ball").className = "movimento"
            alert("teste")
        break
    }
}
window.onload = animaMenu();

This code is what I want to change

window.onscroll = function animaMenu() {
    if (pageYOffset > 70) {
          document.getElementById("nav").className = "navegacao-movel"

    } else if (pageYOffset > 800) {
          document.getElementById("nav").className = "navegacao"        

    } else if (pageYOffset > 1600) {
          document.getElementById("section").className = "hover"        
    }
}
window.onload = animaMenu();
    
asked by anonymous 19.03.2014 / 15:07

5 answers

5

You are doing switch in a list, I believe it only applies to a primitive value. In addition, JavaScript uses true and false for boolean values, not 0 and 1 .

However, there is a way to put your true / false conditions in an array and make a switch in the first one that applies. The only detail is that in your case, this has to be done backwards (because there is a hierarchy of conditions - if X > 800 then X > 70 , then you have to test the larger ones first).

var menu = [pageXOffset > 1600, pageXOffset > 800, pageXOffset > 70];
switch (menu.indexOf(true)) {
    case 0:
        var x = document.getElementById("nav").className = "hover"
    break
    case 1:
        var x = document.getElementById("nav").className = "movimento"
    break
    case 2:
        var x = document.getElementById("nav").className = "navegacao-movel"
    break
}

The indexOf function of class Array takes the first index in which an element is found. If you then have an array of booleans, just look at that array for true .

    
19.03.2014 / 15:29
4

In your case, to make it easier to understand and narrow the lines of code, you do not need switch(case) nor if&else , you can only use Array 's as demonstrated part of @mgibsonbr (array of conditions), however I do not see why to use switch(case) :

var values = ["navegacao-movel","navegacao","hover"];
var cond   = [pageYOffset > 1600, pageYOffset > 800, pageYOffset > 70];
document.getElementById("nav").className = values[cond.indexOf(true)];

This way you can even add more conditions and values if you want.

    
19.03.2014 / 17:38
2

When you put else if you will have to put a new condition. For example:

   else if( x > y) { };

But in the last term, in the last condition must be else that corresponds to say that no previous conditions funtioned :. For example:

  if(x == y){
      // verficação 1
  }else if(x < y){
      // verficação 2
  }else if(x > y){
      // verficação 3
  }else{
      // Nenhuma das condições funcionou então ... 
  }

I hope I have helped. Thanks.

    
19.03.2014 / 15:27
2

Personally I do not really like switch / case. Ugly and easy syntax to make mistakes. One option to consider is to use a vector. Following is a pseudocode (not tested):

opcoes = {};
opcoes["1"] = function() { faz_isso(); };
opcoes["2"] = function() { faz_aquilo(); };
opcoes["3"] = function() { faz_outro(); };

opcao = "" + menu; // converter para string

if (menu in opcoes) {
   // executa opção
   opcoes[menu]();
} else {
   // equivalente ao "default:" do switch/case
}
    
19.03.2014 / 15:52
0

Considering that you want to change the value of this element document.getElementById("nav").className

I would use it like this:

document.getElementById("nav").className = (pageXOffset > 1600) ? "hover": ( (pageXOffset > 800)? "movimento":"navegacao-movel" );

Basically it is a IF of a line and works as follows

CONDIÇÃO ? VERDADEIRO : FALSO

In the example I used 2

CONDIÇÃO ? VERDADEIRO : ( CONDIÇÃO ? VERDADEIRO : FALSO )
    
19.03.2014 / 18:04