merge jquery повторяющийся код

Я хочу уменьшить количество кода, которое у меня есть на странице. Я не хороший кодер в JavaScript/jQuery, так что несите меня.merge 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'); 
        } 
       } 

      }); 

     }); 
    }

это может быть сделано?

источник

2016-06-29 Al3x

Это выглядит довольно близко. (Измените 'if (i = j)' на 'if (i === j)'.) Можете ли вы рассказать о том, какая у вас проблема с кодом, который вы здесь пытаетесь сделать? – smarx

, когда нажата ссылка Read more, класс должен измениться с col-sm-4 на col-sm-12, а остальные отзывы должны вернуться к col-sm-4 (если любой из них находится в col-sm -12), и это работает с первым кодом , а на второй части кода мой «объединенный код», когда я нажимаю «Читать дальше», все отзывы будут отображаться в col-sm-12, а не только в том, что я нажимаю Read more – Al3x

Вы исправили ошибку, которую я указал? – smarx

Ваш код в значительной степени выглядит правильно. Я сделал пару небольших изменений:

Я использовал анонимную функцию для сохранения значения i для этой итерации внутри обработчика кликов. (В противном случае, вы захватить i себя, и к тому времени, код работает, i предположительно 7 после того, как цикл завершен.)
Я изменил условие использования === (теста на равенство) вместо = (назначений).
Я избавился от $('.testimonial-'+i).each(...), что казалось излишним.
Я сделал некоторые незначительные исправления стиля.

Моя версия кода:

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

источник

2016-06-29 14:40:28 smarx

jsfiddle.net/Lpz8840f Это результат желания, и код, который вы написали, меня не достает :( – Al3x

См. Мое редактирование. (Я отлаживал это путем регистрации, как я предложил в комментариях.) – smarx

Супер, это работает. вы – Al3x

merge jquery повторяющийся код

ответ

Смежные вопросы