Javascript 缩短此代码的最佳方法是什么？

使用DRY方法，我想知道缩短代码的最佳方式是什么。在我看来，这里面似乎有太多的重复

function back(){
    $('.back').click(function(){ 
        if($(this).hasClass('back_3')){
            $('.screen3').addClass('hidden');
            $('.screen1').removeClass('hidden');
        }else if ($(this).hasClass('back_2')){
            $('.screen2').addClass('hidden');
            $('.screen1').removeClass('hidden');
        }else if($(this).hasClass('back_4')){
            $('.screen4').addClass('hidden');
            $('.screen3').removeClass('hidden');
        }else if($(this).hasClass('back_5')){
            $('.screen5').addClass('hidden');
            $('.screen3').removeClass('hidden');
        }else if($(this).hasClass('back_6')){
            $('.screen6').addClass('hidden');
            $('.screen3').removeClass('hidden');

        }
    });
}

---

干燥此代码的最佳方法是使用

data-*

属性将按钮链接到要隐藏/显示的内容

例如（对于第一个

if

分支）

---

同一个处理程序适用于任何

。后退
按钮具有
数据隐藏
和
数据显示
属性。
Simpy提取类的id，然后隐藏/显示相应的类：

 $('.back').click(function(){ 
  var id = this.className.split(" ").find(clss => clss.includes("back_")).split("_")[1];
  $(".screen"+id).addClass("hidden");
  $(".screen"+id>3?3:1).removeClass("hidden");
});

我会这样做（未经测试）：

这就是我在你的情况下应该做的

const路由=[
{id:'back_3'，hide:'.screen 3'，show:'.screen 1'}，
{id:'back_2'，hide:'.screen2'，show:'.screen1'}，
{id:'back_4'，hide:'.screen4'，show:'.screen3'}，
{id:'back_5'，hide:'.screen5'，show:'.screen3'}，
{id:'back_6'，hide:'.screen6'，show:'.screen3'}，
];
函数back（）{
常量hiddenCls=‘隐藏’；
常量$back=$（'.back'）；
返回$back。单击（事件=>{
event.preventDefault（）；
用于（路线的常量路线）{
const{id，hide，show}=route；
if（$（event.currentTarget.hasClass（id））{
$（hide）.addClass（hiddenCls）；
$（show）.removeClass（hiddenCls）；
打破
}
}
});
}
A
for
循环看起来足够了……在发布之前，还包括相关的html结构。我在这里没有看到强模式。什么决定了类删除了什么元素？另外，如果您制作了一个可运行的示例，并将其发布在代码评审中，可能会更好。这个网站主要是用来修复坏代码的。假设的逻辑是什么？很难识别模式…我不会向DOM元素添加路由逻辑。。。这是一种商业逻辑Concern@HitmandsDOM中没有“路由逻辑”，只有属性信息。任何路由逻辑都在jquery中。在任何情况下，如果OP需要路由逻辑，他们应该使用无数路由库中的一个。
隐藏屏幕3和显示屏幕4
是路由逻辑。。是的，它应该已经实现了某种路由…这不符合
的要求，否则如果
排除，那么
返回
应该完成任务？！第一场比赛将退出循环。returnfalse中断迭代。更新了代码，可能有多个classes@hitmands但是，第一个将仅被触发。在mys和ops代码中都有。@elyes10很乐意帮忙；）
$('.back').click(function(){ 
    var $this = $(this);
    $($this.data("hide")).addClass("hidden");
    $($this.data("show")).removeClass("hidden");
});

 $('.back').click(function(){ 
  var id = this.className.split(" ").find(clss => clss.includes("back_")).split("_")[1];
  $(".screen"+id).addClass("hidden");
  $(".screen"+id>3?3:1).removeClass("hidden");
});

var arrScreens=[
   {hC:"back_3",screenShow:".screen3",screenHide:".screen1"]},
   {hC:"back_2",screenShow:".screen2",screenHide:".screen1"]},
]

function back(){
    $('.back').click(function(){ 
         var $this=$(this);
         $(arrScreens).each(function(i,obj) {
               if($this.hasClass(obj.hC)) {
                   $(obj.screenShow).addClass('hidden');
                   $(obj.screenHide).removeClass('hidden');
                   return false;                        
               }
         });
    });
}