Quale schema usare quando devi nascondere / mostrare sezioni diverse su un modulo a seconda del valore del menu a discesa?

1

Ad esempio, supponiamo di avere 8 sezioni da nascondere / mostrare e in base al valore di un menu a discesa, devi mostrare o nascondere dinamicamente da 1 a 8 sezioni.

1) C'è un modo migliore per farlo rispetto all'approccio del codice qui sotto?
2) Questo approccio è accettabile?

$("#dropdown").change(function(){

  var value = this.value;
  var $section1 = $("#section1");
  var $section2 = $("#section2");
  var $section3 = $("#section3");

  $(".section").hide(); //hides all sections

  if(value == "someValue"){
     $section1.show();
     $section2.show();
  } else if (value == "someOtherValue") {
     $section3.show();
  } else {
     $section2.show();
     $section3.show();
  }

  //etc
})

Qualsiasi altro consiglio che consideri utile sarà apprezzato.

    
posta Alejandro Veltri 01.06.2015 - 20:03
fonte

1 risposta

1

Sebbene non sia un modello di per sé, la cosa principale che farei qui è separare il codice dai dati .

Per "dati", intendo quali sezioni devono essere mostrate o nascoste per ogni articolo a discesa.

var sectionsToShow = {
   item1: [1, 2, 3],
   item2: [2],
   item3: [6, 4, 5],
   ...
};

Quindi il tuo gestore di dropdown può (idealmente) fare qualcosa di simile

sectionsToShow[this.value].forEach(function(sectionToShow) {
   actualSections[sectionToShow].show();
});

per mostrare quali sezioni sono appropriate per quell'elemento.

In questo modo è molto, molto più facile riconfigurare quali sezioni sono mostrate per ogni oggetto quando inevitabilmente devi modificare quella mappatura in qualche modo.

    
risposta data 01.06.2015 - 20:20
fonte

Leggi altre domande sui tag