javascript - How to simplify this 3 switch-case functions? -
i want simplify long jquery/javascript code, can me? still learn :)
here's jquery code:
$('.pagination-link').click(function() { settimeout(function() { currentanchor = $('body').attr('class'); switch (currentanchor) { case 'active-slide-1': $('#rond').removeclass().addclass('rond1').animate(); break; case 'active-slide-2': $('#rond').removeclass().addclass('rond2').animate(); break; case 'active-slide-3': $('#rond').removeclass().addclass('rond3').animate(); break; case 'active-slide-4': $('#rond').removeclass().addclass('rond4').animate(); break; case 'active-slide-5': $('#rond').removeclass().addclass('rond5').animate(); break; case 'active-slide-6': $('#rond').removeclass().addclass('rond6').animate(); break; case 'active-slide-7': $('#rond').removeclass().addclass('rond7').animate(); break; case 'active-slide-8': $('#rond').removeclass().addclass('rond8').animate(); break; default: $('#rond').removeclass(); } }, 50); }); $('.overlay-menu > ul > li > a').click(function() { settimeout(function() { currentanchor = $('body').attr('class'); switch (currentanchor) { case 'active-slide-1': $('#rond').removeclass().addclass('rond1').animate(); break; case 'active-slide-2': $('#rond').removeclass().addclass('rond2').animate(); break; case 'active-slide-3': $('#rond').removeclass().addclass('rond3').animate(); break; case 'active-slide-4': $('#rond').removeclass().addclass('rond4').animate(); break; case 'active-slide-5': $('#rond').removeclass().addclass('rond5').animate(); break; case 'active-slide-6': $('#rond').removeclass().addclass('rond6').animate(); break; case 'active-slide-7': $('#rond').removeclass().addclass('rond7').animate(); break; case 'active-slide-8': $('#rond').removeclass().addclass('rond8').animate(); break; default: $('#rond').removeclass(); } }, 50); }); $(window).mousewheel(function() { settimeout(function() { currentanchor = $('body').attr('class'); switch (currentanchor) { case 'active-slide-1': $('#rond').removeclass().addclass('rond1').animate(); break; case 'active-slide-2': $('#rond').removeclass().addclass('rond2').animate(); break; case 'active-slide-3': $('#rond').removeclass().addclass('rond3').animate(); break; case 'active-slide-4': $('#rond').removeclass().addclass('rond4').animate(); break; case 'active-slide-5': $('#rond').removeclass().addclass('rond5').animate(); break; case 'active-slide-6': $('#rond').removeclass().addclass('rond6').animate(); break; case 'active-slide-7': $('#rond').removeclass().addclass('rond7').animate(); break; case 'active-slide-8': $('#rond').removeclass().addclass('rond8').animate(); break; default: $('#rond').removeclass(); } }, 50); }); i don't know if have use php end of currentanchor , put parameters. thank !
edit: found default case not necessary in code. learn new if had defaut case important. so, here it's new one:
function rondclass() { settimeout(function() { currentanchor = $('body').attr('class'); var currentclass = currentanchor.replace('active-slide-', 'rond'); $('#rond').removeclass().addclass(currentclass).animate(); }, 50); } $('.pagination-link').click(rondclass); $('.overlay-menu > ul > li > a').click(rondclass); $(window).mousewheel(rondclass); thank !
you replace active-slide- rond.
var currentanchor = $('body').attr('class'); var newclass = currentanchor.replace('active-slide-', 'rond'); $('#rond').removeclass().addclass(newclass).animate(); to handle default case, can handle using indexof or match:
// indexof version if (currentanchor.indexof('active-slide-') !== 0) { $('#rond').removeclass(); } else { $('#rond').removeclass().addclass(newclass).animate(); } // match version if (!currentanchor.match(/^active-slide-/)) { $('#rond').removeclass(); } else { $('#rond').removeclass().addclass(newclass).animate(); } 