如何简化这 3 个 switch-case 功能？

Question

我想简化这个长长的 jquery/javascript 代码，你能帮帮我吗？我还在学习:)

这是我的 jquery 代码：

$('.pagination-link').click(function() {
  setTimeout(function() {
    currentAnchor = $('body').attr('class');
    switch (currentAnchor) {
      case 'active-slide-1':
        $('#rond').removeClass().addClass('rond1').animate();
        break;
      case 'active-slide-2':
        $('#rond').removeClass().addClass('rond2').animate();
        break;
      case 'active-slide-3':
        $('#rond').removeClass().addClass('rond3').animate();
        break;
      case 'active-slide-4':
        $('#rond').removeClass().addClass('rond4').animate();
        break;
      case 'active-slide-5':
        $('#rond').removeClass().addClass('rond5').animate();
        break;
      case 'active-slide-6':
        $('#rond').removeClass().addClass('rond6').animate();
        break;
      case 'active-slide-7':
        $('#rond').removeClass().addClass('rond7').animate();
        break;
      case 'active-slide-8':
        $('#rond').removeClass().addClass('rond8').animate();
        break;
      default:
        $('#rond').removeClass();
    }
  }, 50);
});

$('.overlay-menu > ul > li > a').click(function() {
  setTimeout(function() {
    currentAnchor = $('body').attr('class');
    switch (currentAnchor) {
      case 'active-slide-1':
        $('#rond').removeClass().addClass('rond1').animate();
        break;
      case 'active-slide-2':
        $('#rond').removeClass().addClass('rond2').animate();
        break;
      case 'active-slide-3':
        $('#rond').removeClass().addClass('rond3').animate();
        break;
      case 'active-slide-4':
        $('#rond').removeClass().addClass('rond4').animate();
        break;
      case 'active-slide-5':
        $('#rond').removeClass().addClass('rond5').animate();
        break;
      case 'active-slide-6':
        $('#rond').removeClass().addClass('rond6').animate();
        break;
      case 'active-slide-7':
        $('#rond').removeClass().addClass('rond7').animate();
        break;
      case 'active-slide-8':
        $('#rond').removeClass().addClass('rond8').animate();
        break;
      default:
        $('#rond').removeClass();
    }
  }, 50);
});

$(window).mousewheel(function() {
  setTimeout(function() {
    currentAnchor = $('body').attr('class');
    switch (currentAnchor) {
      case 'active-slide-1':
        $('#rond').removeClass().addClass('rond1').animate();
        break;
      case 'active-slide-2':
        $('#rond').removeClass().addClass('rond2').animate();
        break;
      case 'active-slide-3':
        $('#rond').removeClass().addClass('rond3').animate();
        break;
      case 'active-slide-4':
        $('#rond').removeClass().addClass('rond4').animate();
        break;
      case 'active-slide-5':
        $('#rond').removeClass().addClass('rond5').animate();
        break;
      case 'active-slide-6':
        $('#rond').removeClass().addClass('rond6').animate();
        break;
      case 'active-slide-7':
        $('#rond').removeClass().addClass('rond7').animate();
        break;
      case 'active-slide-8':
        $('#rond').removeClass().addClass('rond8').animate();
        break;
      default:
        $('#rond').removeClass();
    }
  }, 50);
});

不知道要不要用php来获取currentAnchor的结尾，并把它作为参数。感谢您的帮助！

编辑：我发现我的代码中不需要默认大小写。但是，如果我的默认案例很重要，我会学到一些新东西。所以，这是新的：

            function rondClass() {
                setTimeout(function() {
                    currentAnchor = $('body').attr('class'); 
                    var currentClass = currentAnchor.replace('active-slide-', 'rond');
                    $('#rond').removeClass().addClass(currentClass).animate();
                }, 50);
            }


            $('.pagination-link').click(rondClass);
            $('.overlay-menu > ul > li > a').click(rondClass);
            $(window).mousewheel(rondClass);

谢谢大家！

Answer 1

您可以将active-slide- 替换为rond。

var currentAnchor = $('body').attr('class');
var newClass = currentAnchor.replace('active-slide-', 'rond');
$('#rond').removeClass().addClass(newClass).animate();

要处理默认情况，您可以使用indexOf 或match 处理：

// indexOf version
if (currentAnchor.indexOf('active-slide-') !== 0) {
  $('#rond').removeClass();
} else {
  $('#rond').removeClass().addClass(newClass).animate();
}

// match version
if (!currentAnchor.match(/^active-slide-/)) {
  $('#rond').removeClass();
} else {
  $('#rond').removeClass().addClass(newClass).animate();
}

Answer 2

用编程方法替换开关/案例并提取函数以避免代码重复。

var onClick = function() {
  setTimeout(function() {
    currentAnchor = $('body').attr('class'); 
    var slide = currentAnchor.match(/active\-slide\-(\d)/);
    if (slide) {
      $('#rond').removeClass().addClass('rond' + slide[1]).animate();
    } else {
      $('#rond').removeClass();
    }
  }, 50)
})

$('.overlay-menu > ul > li > a').click(onClick);
$('.pagination-link').click(onClick);