縮短此代碼的最佳方式是什麼？

-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

縮短此代碼的最佳方式是什麼？

回答

相關問題