javascript - 我怎样才能让我的 JS 代码更短？

标签 javascript jquery html css switch-statement

<分区>

我在尝试创建网站时经常遇到这个问题。由于我可能不是唯一遇到此问题的人，所以我想分享我的问题:

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;
}

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

如果有人可以通过向我展示示例或向我推荐解决方案来帮助我，那就太好了。

提前致谢!

最佳答案

一种方法如下:

$('#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's multiple selector并在一个语句中将类 hideSlide 添加到所有幻灯片，然后从 switch case 中的所需幻灯片中删除该类。

关于javascript - 我怎样才能让我的 JS 代码更短？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47389438/

上一篇：javascript - 点击正文切换类

下一篇：html - 仅设置文档中第一个 h1 的样式

html - 在 As3 中使用 PayPal for flash builder 4.5

html - 使用 CSS 显示表格的滚动布局

javascript - 如何在 javascript 中显示带有文本框和浏览按钮的弹出窗口？

javascript - 如何映射 Ng-repeat 中传入的值

javascript - vue-router 意外导入 token

javascript - 是否有任何原因导致 json 在 eval 时返回字符串中的最后一个对象

javascript - C3 图加载回调

javascript - 使用 SPServices 从另一个域上的 Sharepoint 获取总列表项

javascript - 为什么我的 AmChart 在添加新值/订单时没有更新？