Comment rendre cette fonction jQuery plus élégante?

Question

Sur ma page, j'ai une liste déroulante avec une valeur par défaut de (vide). Lorsque l'utilisateur sélectionne une entrée, le formulaire approprié pour ce type d'entrée est affiché.

Quelques problèmes ..

1. Le code n'est pas DRY et semble plus bavard qu'il ne devrait l'être, donc difficile à maintenir / extensible.
2. Lorsqu'un utilisateur sélectionne quelque chose, remplit le formulaire, passe à la page suivante, puis appuie sur le bouton Retour, le champ de sélection est présélectionné, mais comme il n'y a pas eu d'événement .change(), la zone de formulaire n'est pas affichée. Ils doivent sélectionner un autre <option>, puis cliquer sur leur choix d'origine pour récupérer leur forum.

Voici le code:

<script type="text/javascript">
    $(document).ready(function(){

        $('#select_type').change(function () {
            $('fieldset').css('display','none'); # hide all the forms on the page
            var selectval = $('#select_type').val();
            if (selectval == 'instance')
            {
                $('#instance').toggle();
            }
            if (selectval == 'mob')
            {
                $('#mob').toggle();
            }
            if (selectval == 'dailyquest')
            {
                $('#dailyquest').toggle();
            }
            if (selectval == 'repeatablequest')
            {
                $('#repeatablequest').toggle();
            }
            if (selectval == 'zonequest')
            {
                $('#zonequest').toggle();
            }
            if (selectval == 'reward')
            {
                $('#reward').toggle();
            }
        });

    });
</script>

Aidez les gourous JS de SO!

Answer 1

Au lieu des multiples clauses IF, vous pouvez effectuer une itération sur un tableau de valeurs. Mais dans ce cas, s'il n'y a pas d'autres exigences, alors simplement:

$(document).ready(function(){
     var select = $('#select_type');
     $('#' + select.val()).toggle(); // Toggle the preset value
     select.change(function () {
         $('fieldset').css('display','none');
         $('#' + $(this).val()).toggle();
     });
});

Cela devrait suffire.

Answer 2

$(document).ready(function() {
  $("#select_type").change(function () {
    $("fieldset").css("display", "none");
    $("#" + $(this).val()).toggle();
  }).change();
});

Answer 3

1. Vous pouvez modifier toutes ces instructions if en certaines expressions (||).
2. Sur ready (), vous pouvez vérifier si les champs ont la valeur par défaut. Sinon, vous pouvez déclencher manuellement change ().

Answer 4

Je n'utiliserais probablement pas de boîte de sélection, car les boîtes de sélection ne sont un bon choix que si l'utilisateur connaît les options avant de les supprimer. Aucune viande mystère autorisée. Voici un bon article sur les entrées dépendantes de la sélection .

Mon point de vue sur ce problème: * Seule la section liée à l'option sélectionnée doit être affichée, je ne souhaite donc pas utiliser la bascule.

$(function(){
  var sel = $("#select_type");
  $("#"+sel.val()).show();
  sel.change(function(){
    $(this).children("option").each(function(){
      $("#"+this.value)[this.selected ? "show" : "hide"]();
    });
  });
});