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的结尾并将其作为参数。谢谢你的帮助！

编辑：我发现我的代码中没有必要使用默认情况。但是，如果我的defaut案例很重要，我会学到新东西。所以，这是新的：

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

如何简化这3个开关盒功能？

2 个答案: