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

-1

使用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'); 

     } 
    }); 
}

来源

2017-08-07 eliyes10

https://codereview.stackexchange.com/ – j08691

一个'for'循环看起来足够... – Teemu

在发布它也有包括相关的HTML结构 – charlietfl

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

来源

2017-08-07 15:43:23

它可以有多个类 – Hitmands

@hitmands仍然只有第一个触发。在mys和操作代码中。 –

这是个诀窍！非常感谢！ – eliyes10

到DRYify这个代码

最好的办法是使用data-*属性按钮链接到什么隐藏/显示

如（为第一if分支）

<button class="back" data-hide=".screen3" data-show=".screen1">Back_3</button>

，然后这个

$('.back').click(function(){ 
    var $this = $(this); 
    $($this.data("hide")).addClass("hidden"); 
    $($this.data("show")).removeClass("hidden"); 
});

相同的处理程序适用于任何.back按钮与data-hide和data-show属性。

来源

2017-08-07 15:34:53 Jamiec

我不会添加路由逻辑到DOM元素......这是一个业务逻辑关注点 – Hitmands

@Hitmands在DOM中没有“路由逻辑”，有属性信息。任何路由逻辑都在jQuery中。无论如何，如果OP的路由逻辑需要使用其中的一个路由库。 – Jamiec

'隐藏屏幕3和显示屏幕4'是路由逻辑..是的，它应该实现了某种路由... – Hitmands

我会做这样的事情（未测试）：

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

来源

2017-08-07 15:46:40 Auskennfuchs

这不会遵循'else if'排除 – Hitmands

'return'应该可以做这个工作吗？！第一场比赛将退出循环。 – Auskennfuchs

http://api.jquery.com/jQuery.each/ return false打破迭代。更新了代码 – Auskennfuchs

这是我会已经完成了你的情况。

const routes = [ 
    {id: 'back_3', hide: '.screen3', show: '.screen1' }, 
    {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' }, 
]; 

function back() { 
    const hiddenCls = 'hidden'; 
    const $back = $('.back'); 

    return $back.click(event => { 
    event.preventDefault(); 

    for(const route of routes) { 
     const {id, hide, show} = route; 

     if($(event.currentTarget).hasClass(id)) { 

     $(hide).addClass(hiddenCls); 
     $(show).removeClass(hiddenCls); 

     break; 
     } 
    } 

    }); 
}

来源

2017-08-07 15:52:06 Hitmands

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

回答

相关问题