如何缩短JS代码？

Question

当我试图创建一个网站时,我经常遇到这个问题.因为我可能不是遇到这个问题的唯一一个,我想分享我的问题:

switch (input) {
  case "home":
    $('#slide1').removeClass('hideSlide');
    $('#slide2').addClass('hideSlide');
    $('#slide3').addClass('hideSlide');
    $('#slide4').addClass('hideSlide');
    $('#slide5').addClass('hideSlide');
    break;
  case "bio":
    $('#slide1').addClass('hideSlide');
    $('#slide2').removeClass('hideSlide');
    $('#slide3').addClass('hideSlide');
    $('#slide4').addClass('hideSlide');
    $('#slide5').addClass('hideSlide');
    break;
  case "ref":
    $('#slide1').addClass('hideSlide');
    $('#slide2').addClass('hideSlide');
    $('#slide3').removeClass('hideSlide');
    $('#slide4').addClass('hideSlide');
    $('#slide5').addClass('hideSlide');
    break;
  case "dit":
    $('#slide1').addClass('hideSlide');
    $('#slide2').addClass('hideSlide');
    $('#slide3').addClass('hideSlide');
    $('#slide4').removeClass('hideSlide');
    $('#slide5').addClass('hideSlide');
    break;
  case "cont":
    $('#slide1').addClass('hideSlide');
    $('#slide2').addClass('hideSlide');
    $('#slide3').addClass('hideSlide');
    $('#slide4').addClass('hideSlide');
    $('#slide5').removeClass('hideSlide');
    break;
  case "closeMenu":
    closeMenu();
    break
  default:

    break;
}

所以我的问题是:我如何简化或缩短这段代码？

如果有人能通过向我展示一个例子或者通过引用我的解决方案来帮助我,那将是非常好的.

提前致谢!

Answer 1

一种方法是这样做:

$('#slide1, #slide2, #slide3, #slide4, #slide5').addClass('hideSlide');

switch (input) {
  case "home":
    $('#slide1').removeClass('hideSlide');
    break;
  case "bio":
    $('#slide2').removeClass('hideSlide');
    break;
  case "ref":
    $('#slide3').removeClass('hideSlide');
    break;
  case "dit":
    $('#slide4').removeClass('hideSlide');
    break;
  case "cont":
    $('#slide5').removeClass('hideSlide');
    break;
  case "closeMenu":
    closeMenu();
    break
  default:
    break;
}

这利用了jQuery的多选择器,并将类添加hideSlide到一个语句中的所有幻灯片中,然后从switch case中的所需幻灯片中删除该类.