堆棧內存溢出
  簡體   English   中英

合並jQuery重復代碼

[英]merge jquery repetitive code

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

問題描述

我想減少頁面上的代碼量。 我不是JavaScript / jQuery的優秀程序員，所以請多多包涵。

我有以下代碼 

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

我想合並成這樣的東西 

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

            });

        });
    }

能做到嗎？

1 個解決方案

解決方案1
 2 已采納  2016-06-29 14:40:28

您的代碼看起來非常正確。 我做了一些小改動：

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 重構重復的jQuery代碼 減少JQuery重復代碼 將重復的JQuery代碼轉換為干凈的代碼 如何簡化此重復的jquery代碼？ jQuery重構，如何避免重復代碼？ 如何使用不同的選擇器簡化重復的jQuery代碼 如何用jQuery中的函數替換重復的代碼塊 優化重復代碼以添加新選項以選擇jquery 壓縮重復的jQuery函數 壓縮重復性jQuery語句
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM