javascript - 如何简化这 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();
}