web-dev-qa-db-fra.com

javascript: utiliser une condition en cas de changement

Désolé pour cette question stupide. Comment utiliser une condition pour un cas dans l'élément de langage javascript switch-case? Comme dans l'exemple ci-dessous, un cas doit correspondre lorsque la variable liCount est <= 5 et> 0; Cependant, mon code ne fonctionne pas:

switch (liCount) {
    case 0:
        setLayoutState('start');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case (liCount<=5 && liCount>0):
        setLayoutState('upload1Row');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case (liCount<=10 && liCount>5):
        setLayoutState('upload2Rows');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case (liCount>10):
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;                  
}

Merci pour tout conseil!

javascriptconditional-statementsselect-case
64
haemse

Cela marche:

switch (true) {
    case liCount == 0:
        setLayoutState('start');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case liCount<=5 && liCount>0:
        setLayoutState('upload1Row');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case liCount<=10 && liCount>5:
        setLayoutState('upload2Rows');
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;
    case liCount>10:
        var api = $('#UploadList').data('jsp');
        api.reinitialise();
        break;                  
}

Une version précédente de cette réponse considérait les parenthèses comme le coupable. En vérité, les parenthèses sont sans importance ici - la seule chose nécessaire est switch(true){...} et que les expressions de cas soient évaluées en booléens.

Cela fonctionne parce que la valeur que nous donnons au commutateur est utilisée comme base de comparaison. Par conséquent, les expressions de cas, évaluées également en booléens, détermineront le cas à exécuter. Pourrait également inverser la situation et passer switch(false){..} et demander aux expressions souhaitées d’évaluer false, plutôt que true. Cependant, cela fonctionne aussi, donc il faut garder à l'esprit pour comprendre ce qu'il fait.

Par exemple, si liCount est égal à 3, la première comparaison est true === (liCount == 0), ce qui signifie que le premier cas est faux. Le commutateur passe ensuite au cas suivant true === (liCount<=5 && liCount>0). Cette expression est évaluée à true, ce qui signifie que ce cas est exécuté et se termine au break. J'ai ajouté des parenthèses pour clarifier les choses, mais elles sont facultatives, en fonction de la complexité de votre expression.

C'est assez simple, et une manière élégante (si cela correspond à ce que vous essayez de faire) de gérer une longue série de conditions, où peut-être une longue série de ìf() ... else if() ... else if () ... pourrait introduire beaucoup de bruit visuel ou de fragilité .

Utilisez avec prudence, car il s'agit d'un modèle non standard, même s'il s'agit d'un code valide.

217
dmp

Vous avez moyen trop compliqué cela. Écrivez-le avec des déclarations if comme ceci:

if(liCount == 0)
    setLayoutState('start');
else if(liCount<=5)
    setLayoutState('upload1Row');
else if(liCount<=10)
    setLayoutState('upload2Rows');

$('#UploadList').data('jsp').reinitialise();

Ou, si ChaosPandion essaie d'optimiser autant que possible:

setLayoutState(liCount == 0 ? 'start' :
               liCount <= 5 ? 'upload1Row' :
               liCount <= 10 ? 'upload2Rows' :
               null);

$('#UploadList').data('jsp').reinitialise();
19
Eric

Voir réponse de dmp ci-dessous. Je supprimerais cette réponse si je le pouvais, mais elle a été acceptée, c'est donc la meilleure chose à faire :)

Tu ne peux pas. Les interprètes JS exigent que vous compariez avec l'instruction switch (par exemple, il n'y a pas d'instruction "case when"). Si vous voulez vraiment faire cela, vous pouvez simplement créer des blocs if(){ .. } else if(){ .. }.

7
Mark Kahn

Vous souhaitez utiliser les instructions if:

if (liCount === 0) {
    setLayoutState('start');
} else if (liCount <= 5) {
    setLayoutState('upload1Row');
} else if (liCount <= 10) {
    setLayoutState('upload2Rows');
}
$('#UploadList').data('jsp').reinitialise();
7
ChaosPandion
switch (true) {
  case condition0:
    ...
    break;
  case condition1:
    ...
    break;
}

fonctionnera en JavaScript tant que vos conditions renvoient les valeurs boolean correctes, mais elles ne présentent pas beaucoup d'avantages par rapport à else if déclarations.

5
Mike Samuel

Si c'est ce que vous voulez faire, il serait préférable d'utiliser les instructions if. Par exemple:

if(liCount == 0){
    setLayoutState('start');
}
if(liCount<=5 && liCount>0){
    setLayoutState('upload1Row');
}
if(liCount<=10 && liCount>5){
    setLayoutState('upload2Rows');
}             
var api = $('#UploadList').data('jsp');
    api.reinitialise();
4
Neal

C'est un cas où vous devriez utiliser les clauses if.

3
ThiefMaster

Votre code ne fonctionne pas car il ne fait pas ce que vous attendez de lui. Les blocs de commutation prennent une valeur et comparent chaque cas à la valeur donnée, en recherchant l'égalité. Votre valeur de comparaison est un entier, mais la plupart de vos expressions de cas se résolvent en une valeur booléenne.

Donc, par exemple, disons liCount = 2. Votre premier cas ne correspondra pas, car 2 != 0. Votre deuxième cas, (liCount<=5 && liCount>0) évalue à true, mais 2 != true, donc ce cas ne correspondra pas non plus.

Pour cette raison, comme beaucoup d’autres l’ont dit, vous devriez utiliser une série de if...then...else if blocs pour le faire.

2
Ender

si les valeurs possibles sont des entiers, vous pouvez regrouper les cas. Sinon, utilisez les ifs.

var api, tem;

switch(liCount){
    case 0:
    tem= 'start';
    break;
    case 1: case 2: case 3: case 4: case 5:
    tem= 'upload1Row';
    break;
    case 6: case 7: case 8: case 9: case 10:
    tem= 'upload2Rows';
    break;
    default:
    break;
}
if(tem) setLayoutState((tem);
api= $('#UploadList').data('jsp');
api.reinitialise();
2
kennebec