如何使我的 JS 代码更短？ [复制]答案

【问题标题】：How can I make my JS code shorter? [duplicate]如何使我的 JS 代码更短？ [复制]
【发布时间】：2018-05-03 12:29:02
【问题描述】：

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

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

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

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

提前致谢！

【问题讨论】：

HTML 是如何生成的？能改吗？

标签： javascript jquery html css switch-statement

【解决方案1】：

function doSomething(elementToHide)
{
    var array = [
    '#slide1',
    '#slide2',
    '#slide3',
    '#slide4',
    '#slide5',
  ]

  array.foreach(function (item) {
        if (item === elementToHide)
      {
        $(item).removeClass('hideSlide')
      }
      else {
        $(item).addClass('hideSlide')
      }
  })
}

这样你只需要在每个案例中调用一次doSomething('#slideX')。

【讨论】：

【解决方案2】：

最明显的重构就是这样做

$(someSelectorTargetingAllSlides).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;
}

然后，作为摆脱丑陋和冗长的 switch 语句的下一步，您可以将输入值映射到选择器：

$(someSelectorTargetingAllSlides).addClass('hideSlide');

var actionMap = {
 home: '#slide1',
 bio: '#slide2',
 ref: '#slide3'
 dit: '#slide4',
 cont: '#slide5'
}

if (actionMap[input]) {
  $(actionMap[input]).removeClass('hideSlide');
}
else if (input == "closeMenu") {
  closeMenu();
}

这还远不是完美的代码，但它更加简洁和干燥。

【讨论】：

【解决方案3】：

试试这样的

function showSlide(id){
    $('.slides').addClass('.hideSlide');
    $('#'+id).removeClass('.hideSlide');
}

showSlide('your-slide-id');

应为所有幻灯片提供类幻灯片，并且每张幻灯片都应有自己的 id，您可以使用它来添加类。

【讨论】：

【解决方案4】：

一种方法如下：

$('#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 类添加到一个语句中的所有幻灯片中，然后从开关案例中所需的幻灯片中删除该类。

【讨论】：

谢谢，这对我帮助很大！

【解决方案5】：

为所有链接/幻灯片添加一个类 - 在点击事件中使用类名添加 hideSlide 类，然后使用被点击元素的 id 将其删除，以下需要将“幻灯片”类添加到链接 - 然后基于其中任何一个的点击 - 将 hideSlide 类应用于所有链接，然后使用该链接的 ID 从点击的元素中删除它。

$('.slides').click(function() {
  $('.slides').addClass('hideSlide');
  let id = $(this).attr('id');
  ('#' +id).removeClass('hideSlide');
})

【讨论】：

【解决方案6】：

在 switch case 之前添加所有类。在 switch 案例中，您只需删除类

【讨论】：