Question

我根据其他按钮位置创建了从左到右切换内容的脚本。对于这么简单的事情，代码相当大。如何更改/压缩代码，以便它不会占用太多空间并且速度更快？

switch(id) {
  case "menu-button-1":
    changActive(idElem);
    $("#offert").css("transform","translateX(200%)");
    $("#gallery").css("transform","translateX(200%)");
    $("#contact").css("transform","translateX(200%)");
  break;

  case "menu-button-2":
    changActive(idElem);
    $("#home").css("transform","translateX(-200%)");
    $("#gallery").css("transform","translateX(200%)");
    $("#contact").css("transform","translateX(200%)");
  break;

  case "menu-button-3":
    changActive(idElem);
    $("#home").css("transform","translateX(-200%)");
    $("#offert").css("transform","translateX(-200%)");
    $("#contact").css("transform","translateX(200%)");
  break;

  case "menu-button-4":
    changActive(idElem);
    $("#home").css("transform","translateX(-200%)");
    $("#offert").css("transform","translateX(-200%)");
    $("#gallery").css("transform","translateX(-200%)");
  break;
}

jsfiddle

Answer 1

var index=id.split("-")[2]-1;
["home","offert","gallery","contact"]
 .forEach((el,i)=>{
  if(i<index){
  $("#"+el).css("transform","translateX(-200%)");
  }
  if(i>index){
  $("#"+el).css("transform","translateX(200%)");
  }
 });

只需在案例编制索引之前翻译所有元素，然后翻译所有元素。

压缩代码，替换开关功能（javascript）

1 个答案: