Deux fonctions d'un événement

Question

J'ai actuellement deux champs d'entrée qui basculent la valeur "value" à true ou false. Ce que je voudrais arriver, c'est que lorsque l'utilisateur appuie sur le bouton Soumettre, je peux exécuter une instruction if/then pour chaque champ de saisie et passer une variable différente pour chaque champ, puis combiner ces deux variables en une seule variable.

Par exemple.

if ($('input#one').is('[value="true"]')) { 
     var one = 'opt-in-one' 
    } 

    else { 
     var one = 'opt-out-one' 
    } 

if ($('input#two').is('[value="true"]')) { 
     var two = 'opt-in-two' 
    } 

    else { 
     var two = 'opt-out-two' 
    } 
var result = one + two; 

C'est le meilleur que je peux expliquer. Des idées comment écrire cela en une seule fonction de clic?

Edit: Voici le code HTML

<form> 

<input type="hidden" name="optin1" id="optin1holder" value="true" /> 

<input type="hidden" name="optin2" id="optin2holder" value="true" /> 

<input type="submit" class="button" value="Submit"> 

</form> 

Answer 1

Il y a plusieurs façons de glousser cela, par exemple, vous pouvez le faire comme ceci:

$(":submit").click(function() { 
    var result = ($('input#one').val() == 'true' ? 'opt-in-one' : 'opt-out-one') 
      + ($('input#two').val() == 'true' ? 'opt-in-two' : 'opt-out-two'); 
    //do something with result 
}); 

de si vous voulez dire un format comme "out-in-one,opt-out-two", vous pouvez utiliser .map(), comme ceci:

$(":submit").click(function() { 
    var result = $('input#one, input#two').map(function() { 
       return (this.value == 'true' ? 'opt-in-' : 'opt-out-') + this.id; 
       }).get().join(','); 
    //do something with result 
}); 

La deuxième approche fonctionne pour n'importe quel nombre d'entrées, ce serait un peu plus propre si vous leur donniez une classe, alors au lieu de 'input#one, input#two' vous pourriez faire 'input.optinout' par exemple. Vous pouvez également changer .join(',') pour être n'importe quel séparateur que vous voulez.