合并jquery重复代码

Question

我想减少页面上的代码量。我不是JavaScript / jQuery中的好编码器所以请耐心等待。

我有以下代码

def doWithSpring = {
        appSettingsZKClient(CuratorFramework) { bean ->
            bean.builder()
                .namespace(APP_SETTINGS_NAMESPACE)
                .connectString(application.config.zookeeper.connect.url)
                .retryPolicy(new RetryNTimes(10, 1000))
                .build()
        }
    }

我希望合并到像这样的东西

    $('.testimonial-1').each(function(event){ 

        $(this).find('a.read-more-testimonial-1').click(function(event){

            event.preventDefault();
            $('.initial-blockquote-testimonial-1').hide();
            $('.initial-blockquote-testimonial-2').fadeIn(200).show();
            $('.initial-blockquote-testimonial-3').fadeIn(400).show();
            $('.initial-blockquote-testimonial-4').fadeIn(600).show();
            $('.initial-blockquote-testimonial-5').fadeIn(800).show();
            $('.initial-blockquote-testimonial-6').fadeIn(1000).show();
            $('.blockquote-testimonial-1').fadeIn(1000).show();
            $('.blockquote-testimonial-2').hide();
            $('.blockquote-testimonial-3').hide();
            $('.blockquote-testimonial-4').hide();
            $('.blockquote-testimonial-5').hide();
            $('.blockquote-testimonial-6').hide();
            $('.testimonial-1').addClass('col-sm-12').removeClass('col-sm-4');
            $('.testimonial-2').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-3').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-4').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-5').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-6').addClass('col-sm-4').removeClass('col-sm-12');
        }); 
    });

$('.testimonial-2').each(function(event){ 

        $(this).find('a.read-more-testimonial-2').click(function(event){

            event.preventDefault();
            $('.initial-blockquote-testimonial-2').hide();
            $('.initial-blockquote-testimonial-1').fadeIn(200).show();
            $('.initial-blockquote-testimonial-3').fadeIn(400).show();
            $('.initial-blockquote-testimonial-4').fadeIn(600).show();
            $('.initial-blockquote-testimonial-5').fadeIn(800).show();
            $('.initial-blockquote-testimonial-6').fadeIn(1000).show();
            $('.blockquote-testimonial-2').fadeIn(1000).show();
            $('.blockquote-testimonial-1').hide();
            $('.blockquote-testimonial-3').hide();
            $('.blockquote-testimonial-4').hide();
            $('.blockquote-testimonial-5').hide();
            $('.blockquote-testimonial-6').hide();
            $('.testimonial-2').addClass('col-sm-12').removeClass('col-sm-4');
            $('.testimonial-1').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-3').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-4').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-5').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-6').addClass('col-sm-4').removeClass('col-sm-12');
        }); 
    });

$('.testimonial-3').each(function(event){ 

        $(this).find('a.read-more-testimonial-3').click(function(event){

            event.preventDefault();
            $('.initial-blockquote-testimonial-3').hide();
            $('.initial-blockquote-testimonial-2').fadeIn(200).show();
            $('.initial-blockquote-testimonial-1').fadeIn(400).show();
            $('.initial-blockquote-testimonial-4').fadeIn(600).show();
            $('.initial-blockquote-testimonial-5').fadeIn(800).show();
            $('.initial-blockquote-testimonial-6').fadeIn(1000).show();
            $('.blockquote-testimonial-3').fadeIn(1000).show();
            $('.blockquote-testimonial-2').hide();
            $('.blockquote-testimonial-1').hide();
            $('.blockquote-testimonial-4').hide();
            $('.blockquote-testimonial-5').hide();
            $('.blockquote-testimonial-6').hide();
            $('.testimonial-3').addClass('col-sm-12').removeClass('col-sm-4');
            $('.testimonial-2').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-1').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-4').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-5').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-6').addClass('col-sm-4').removeClass('col-sm-12');
        }); 
    });

$('.testimonial-4').each(function(event){ 

        $(this).find('a.read-more-testimonial-4').click(function(event){

            event.preventDefault();
            $('.initial-blockquote-testimonial-4').hide();
            $('.initial-blockquote-testimonial-2').fadeIn(200).show();
            $('.initial-blockquote-testimonial-3').fadeIn(400).show();
            $('.initial-blockquote-testimonial-1').fadeIn(600).show();
            $('.initial-blockquote-testimonial-5').fadeIn(800).show();
            $('.initial-blockquote-testimonial-6').fadeIn(1000).show();
            $('.blockquote-testimonial-4').fadeIn(1000).show();
            $('.blockquote-testimonial-2').hide();
            $('.blockquote-testimonial-3').hide();
            $('.blockquote-testimonial-1').hide();
            $('.blockquote-testimonial-5').hide();
            $('.blockquote-testimonial-6').hide();
            $('.testimonial-4').addClass('col-sm-12').removeClass('col-sm-4');
            $('.testimonial-2').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-3').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-1').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-5').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-6').addClass('col-sm-4').removeClass('col-sm-12');
        }); 
    });

$('.testimonial-5').each(function(event){ 

        $(this).find('a.read-more-testimonial-5').click(function(event){

            event.preventDefault();
            $('.initial-blockquote-testimonial-5').hide();
            $('.initial-blockquote-testimonial-2').fadeIn(200).show();
            $('.initial-blockquote-testimonial-3').fadeIn(400).show();
            $('.initial-blockquote-testimonial-4').fadeIn(600).show();
            $('.initial-blockquote-testimonial-1').fadeIn(800).show();
            $('.initial-blockquote-testimonial-6').fadeIn(1000).show();
            $('.blockquote-testimonial-5').fadeIn(1000).show();
            $('.blockquote-testimonial-2').hide();
            $('.blockquote-testimonial-3').hide();
            $('.blockquote-testimonial-4').hide();
            $('.blockquote-testimonial-1').hide();
            $('.blockquote-testimonial-6').hide();
            $('.testimonial-5').addClass('col-sm-12').removeClass('col-sm-4');
            $('.testimonial-2').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-3').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-4').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-1').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-6').addClass('col-sm-4').removeClass('col-sm-12');
        }); 
    });

$('.testimonial-6').each(function(event){ 

        $(this).find('a.read-more-testimonial-6').click(function(event){

            event.preventDefault();
            $('.initial-blockquote-testimonial-6').hide();
            $('.initial-blockquote-testimonial-2').fadeIn(200).show();
            $('.initial-blockquote-testimonial-3').fadeIn(400).show();
            $('.initial-blockquote-testimonial-4').fadeIn(600).show();
            $('.initial-blockquote-testimonial-5').fadeIn(800).show();
            $('.initial-blockquote-testimonial-1').fadeIn(1000).show();
            $('.blockquote-testimonial-6').fadeIn(1000).show();
            $('.blockquote-testimonial-2').hide();
            $('.blockquote-testimonial-3').hide();
            $('.blockquote-testimonial-4').hide();
            $('.blockquote-testimonial-5').hide();
            $('.blockquote-testimonial-1').hide();
            $('.testimonial-6').addClass('col-sm-12').removeClass('col-sm-4');
            $('.testimonial-2').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-3').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-4').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-5').addClass('col-sm-4').removeClass('col-sm-12');
            $('.testimonial-1').addClass('col-sm-4').removeClass('col-sm-12');
        }); 
    });

可以这样做吗？

Answer 1

您的代码看起来非常正确。我做了一些小改动：

1. 我使用匿名函数在点击处理程序中为该迭代保留i的值。 （否则，您自己捕获i，并且在代码运行时，i大概在循环结束后为7。）
2. 我将条件更改为使用===（测试相等）而不是=（赋值）。
3. 我摆脱了$('.testimonial-'+i).each(...)，这似乎是多余的。
4. 我做了一些小风格的修补。

我的代码版本：

for (var i = 1; i <= 6; i++) {
  (function (i) {
    $('a.read-more-testimonial-' + i).click(function (event) {
      event.preventDefault();
      var k = 200;
      for (var j = 1; j <= 6; j++)
      {
        if (j === i) {
          $('.initial-blockquote-testimonial-' + j).hide();
          $('.blockquote-testimonial-' + j).fadeIn(1000).show();
          $('.testimonial-'+j).addClass('col-sm-12').removeClass('col-sm-4');
        } else {
          $('.initial-blockquote-testimonial-' + j).fadeIn(j * k).show();
          $('.blockquote-testimonial-' + j).hide();
          $('.testimonial-' + j).addClass('col-sm-4').removeClass('col-sm-12');
        }
      }
    });
  })(i);
}