J'ai besoin d'un bouton bascule entre trois valeurs

Question

J'essaye de créer un bouton qui, lorsqu'on clique dessus, va cycler ad nauseum à travers trois valeurs distinctes: "Exclu", "Inclus" et "Incertain", dans cet ordre. Je suis en mesure de créer un bouton simple qui passe une fois les valeurs, en utilisant quelque chose comme ceci:

function valChange()  { 
document.myForm.myButton.value="Value has changed" 
} 

Cependant, une fois que je mets un peu si ... logique d'autre là pour gérer les trois valeurs, il change encore le premier clic, mais pas sur les clics suivants. Quelqu'un a des idées? J'utilise javascript et coldfusion, donc s'il y a un moyen de le faire facilement avec un CFC, ou même jQuery, je suis ouvert à ça.

Merci d'avance.

Answer 1

Le mot-clé est à trois états ici, Google à ce sujet et vous trouverez beaucoup de bonnes ressources. Par exemple this website.

---

Et je viens de faire cet exemple simple, sans utiliser toutes les variables globales:

// Wrap variables that shouldn't be globals in a self-executing function 
document.getElementById('element').onclick = (function(){ 

    var i = 0; 
    var states= ['first', 'second', 'third']; 

    return function(){ 
     // Increment the counter, but don't let it exceed the maximum index 
     i = ++i%states.length; 
     this.value = states[i]; 
    }; 

})(); 

Answer 2

Le code que vous avez déjà, couvre la les fonctionnalités générales que vous avez besoin, ce qui est de définir la valeur d'un bouton à une chaîne particulière.

L'extension que vous regardez est une question de changer la valeur de cette chaîne à l'une des trois valeurs. La première étape pourrait être de voir comment vous seriez en mesure de changer une valeur de plus d'un (pas nécessairement envelopper). Cela pourrait se faire de façon simple avec un tableau, quelque chose comme ce qui suit:

var labels = [ "Initial", "Value has changed", "Value changed again" ]; 
var index = 0; 

function valChange() { 
    index++; 
    document.myForm.myButton.value = labels[index]; 
} 

qui est idéal pour un maximum de deux clics, mais il se casse au-delà parce que vous allez après la fin du tableau. L'astuce pour obtenir le modèle complet de mise en boucle, alors, est de réinitialiser le compteur à zéro une fois qu'il passe devant la fin, ce qui rend efficacement votre circulaire de tableau:

function valChange() { 
    index++; 
    if (index == labels.length) { 
    index = 0; 
    } 
    document.myForm.myButton.value = labels[index]; 
} 

Et le tour est joué! Chaque fois que la fonction valChange est appelée, l'index est incrémenté de sorte que le libellé suivant soit différent et qu'il gère la contrainte de circularité comme requis.

Notez que cette implémentation ne rigoureusement regardez quelle est la valeur actuelle de l'étiquette; il conserve plutôt sa propre version de cet état via le compteur index. Ceci est sans doute plus simple et plus propre si vous savez que cette méthode sera le seul moyen de modifier l'étiquette. Cependant, si l'étiquette peut être modifiée arbitrairement en une valeur différente par un code externe, vous pouvez travailler sur l'index à la volée en obtenant le libellé actuel du bouton et en le comparant à chaque élément du tableau à tour de rôle. C'est plus lent, un peu plus maladroit, mais plus robuste face aux modifications externes.

Answer 3

Vous pouvez également faire quelque chose comme ça. Tout dépend du type de flexibilité/évolutivité que vous souhaitez.

Ici, nous stockons les valeurs dans un objet, donc nous pouvons voir: étant donné un état actuel, où nous devrions passer à.

Évidemment pas la meilleure solution si vous allez ajouter beaucoup plus d'états, mais pourrait être utile si les états ne vont pas "cycler" pour une raison quelconque.

function valChange() { 
    /* Transition states */ 
    var transitions = { 
     /* When value is 'Initial', it will be changed to 'Value has changed' */ 
     'Initial': 'Value has changed', 
     /* When value is 'Value has changed' it will be changed to 'Value has changed again' */ 
     'Value has changed': 'Value has changed again', 
     /* etc */ 
     'Value has changed again': 'Initial' 
    }; 

    var currentValue = document.myForm.myButton.value; 

    document.myForm.myButton.value = transitions[currentValue]; 
}