2016-06-29 20 views
0

私はページにあるコードの量を減らしたいと思います。私はJavaScript/jQueryの良いコーダーではありませんので、私に同行してください。マージjquery繰り返しコード

私は、私はこの

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

      }); 

     }); 
    } 

のようなものにマージしたい

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

し、次のコードは、これを行うことができますか?

+1

は、これはかなり近い見えます。 ( 'if(i = j)'を 'if(i === j)'に変更してください)あなたがここで試しているコードでどんな問題があるかを詳しく説明できますか? – smarx

+0

Read moreリンクを押すと、クラスがcol-sm-4からcol-sm-12に変更され、残りの証明書がcol-sm-4に戻るはずです(col-sm -12)、これは最初のコード で動作し、コードの2番目の部分には「マージされたコード」が続きます。Read moreを押すと、すべての功績が、私がReadを押すだけでなく、col-sm-12になりますmore – Al3x

+0

私が指摘した間違いを修正しましたか? – smarx

答えて

1

あなたのコードはかなりよく見えます。

  1. 匿名関数を使用して、クリックハンドラ内のその反復に対してiという値を保持しました。
  2. =(代入)の代わりに===(等しいかどうかのテスト)を使用するように条件を変更しました。コードが実行されるまでに、iが取得されます。
  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); 
} 
+0

jsfiddle.net/Lpz8840fこれは欲望の結果であり、あなたが書いたコードは私にそこに着くことはありません:( – Al3x

+0

私の編集を参照してください(私はコメントで示唆したように、これをログでデバッグしました) – smarx

+0

君は – Al3x