javascript - 如何简化这三个开关盒功能？

我想简化这段冗长的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);

谢谢大家 ！

最佳答案

您可以将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();
}