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
Post a Comment