javascript - Too much duplication of code -


the problem encountering, have many duplicates. trying show 1/11 tables bottom clicked (list_row[1-11]), when show instance table 2, must hide other tables.

i believe can shortened loop or else, because if have 100 tables must copy , paste, not smart. keep in mind code below showing table 1 table 3. how can prevent these duplicates?

// hide tables default when page loads $('#table1').hide(); $('#table2').hide(); $('#table3').hide(); $('#table4').hide(); $('#table5').hide(); $('#table6').hide(); $('#table7').hide(); $('#table8').hide(); $('#table9').hide(); $('#table10').hide(); $('#table11').hide();                             // show exhaust temperature diagram           $('#list_row1').on('click',function(){              $('#table1').show();             $('#table2').hide();             $('#table3').hide();             $('#table4').hide();             $('#table5').hide();             $('#table6').hide();             $('#table7').hide();             $('#table8').hide();             $('#table9').hide();             $('#table10').hide();             $('#table11').hide();           });          // show cylinder pressure diagram          $('#list_row2').on('click',function(){             $('#table1').hide();             $('#table2').show();             $('#table3').hide();             $('#table4').hide();             $('#table5').hide();             $('#table6').hide();             $('#table7').hide();             $('#table8').hide();             $('#table9').hide();             $('#table10').hide();             $('#table11').hide();            });          $('#list_row3').on('click',function(){              $('#table1').hide();             $('#table2').hide();             $('#table3').show();             $('#table4').hide();             $('#table5').hide();             $('#table6').hide();             $('#table7').hide();             $('#table8').hide();             $('#table9').hide();             $('#table10').hide();             $('#table11').hide();          });  // code continues table11. 

set tables display: none introduce .active class set display: block (or display: table, in case). toggle class on , off:

.active {     display: table; } 
$('#list_row1').on('click', function() {     $('.active').removeclass('active');     $('#table1').addclass('active'); }); 

to avoid repetition, however, you'd better off extending this add data-* attributes #list_row/n/ elements, , handle click events on these:

<elem id="list_row1" data-row="1"></elem> 
$('[data-row]').on('click', function() {     var row = $(this).attr('data-row');      $('.active').removeclass('active');     $('#table' + row).addclass('active'); });  

do note can chain selectors commas. rather using $(elem1).hide(); $(elem2).hide() can instead $(elem1, elem2).hide().


Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -