stackoom
  简体   繁体   中英

merge jquery repetitive code

 原文  2016-06-29 14:22:52  9   1    javascript/ jquery

Question

I want to reduce the amount of code I have on the page. I'm not a good coder in JavaScript / jQuery so bear with me.

I have the following code 

    $('.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');
        }); 
    });

and I want to merge in to something like this 

    var i;
for (i=1; i<=6; i++)
{
    $('.testimonial-'+i).each(function(event){ 

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

            var j;
            var k=200;
            event.preventDefault();
            for (j=1; j<=6; j++)
            {
                if (i=j)
                {
                    $('.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');
                    }
                }

            });

        });
    }

can this be done?

1 answers

solution1
 2 ACCPTED  2016-06-29 14:40:28

Your code pretty much looks right. I made a couple small changes:

  1. I used an anonymous function to preserve the value of i for that iteration inside the click handler. (Otherwise, you capture i itself, and by the time the code runs, i is presumably 7 after the loop has finished.)
  2. I changed the condition to use === (test for equality) instead of = (assignment).
  3. I got rid of $('.testimonial-'+i).each(...) , which seemed superfluous.
  4. I did some minor style fixups.

My version of the code: 

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Refactor repetitive jQuery code Cutting down JQuery repetitive code Transform repetitive JQuery code into clean code How do I simplify this repetitive jquery code? jQuery refactoring, how to avoid repetitive code? How to simplify repetitive jQuery code with different selectors how to replace a repetitive block of code with a function in jQuery Optimize the repetitive code for adding new option to select jquery Condense repetitive jQuery functions Condense Repetitive jQuery statements
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM