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's multiple selector并将类hideSlide添加到一个语句中的所有幻灯片中，然后从切换案例中的所需幻灯片中删除该类。

Answer 2

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

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

Answer 3

在切换案例之前添加所有类。在切换案例中，您只删除类

Answer 4

尝试这样的事情

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

所有幻灯片都应该提供类幻灯片，每个幻灯片都应该有自己的ID，可以用来添加课程。

Answer 5

最明显的重构就是这样做

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

这仍然不是完美的代码，但它更简洁干燥。

Answer 6

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（＆＃39;＃slideX＆＃39;）。

如何缩短JS代码？

6 个答案: