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

Question

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

        }
    });
}

Answer 1

DRYify 这段代码的最佳方法是使用 data-* 属性到 link 按钮到 hide/show

例如（第一个 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");
});

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

Answer 2

Simpy 提取 class 的 id，然后 hide/show 相应的 classes:

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

Answer 3

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

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

Answer 4

这就是我在你的情况下所做的。

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

  });
}

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

What is the best way to shorten this code?

javascript

jquery

dry