如何简化这 3 种开关外壳功能

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

你可以

用rond替换active-slide-。

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