Javascript-форум - Помогите оптимизировать код.

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Помогите оптимизировать код. (https://javascript.ru/forum/jquery/45090-pomogite-optimizirovat-kod.html)

Помогите оптимизировать код.

Добрый вечер.
Помогите оптимизировать код.. я новичек.. )

$('#work_item1').click(function(){
          $('#add_block').load('/portfolio-list.html #work1 > *',function() {
            $(this).parents('.grey').removeClass('animated_mid fadeInDown');
            $(this).parents('.grey').addClass('animated_mid fadeInDown').css({'display' : 'block'});
            $('.add_block_slider').owlCarousel({   
                autoPlay: 3000, //Set AutoPlay to 3 seconds
                navigation : false,
                pagination: true,
                items : 1     
                });
                $('.item').mouseover(function(){
                $(this).find('.fullinfo').css({'display' : 'block'});
                });
                $('.item').mouseleave(function(){
                $(this).find('.fullinfo').css({'display' : 'none'});
                });
            $('.close_work_item').click(function(){
              $(this).css({'color' : 'red'});
              $(this).parents('#add_block').empty();
            });
          });
        });

      $('#work_item2').click(function(){
          $('#add_block').load('/portfolio-list.html #work2 > *',function() {
            $(this).parents('.grey').removeClass('animated_mid fadeInDown');
            $(this).parents('.grey').addClass('animated_mid fadeInDown').css({'display' : 'block'});
            $('.add_block_slider').owlCarousel({   
                autoPlay: 3000, //Set AutoPlay to 3 seconds
                navigation : false,
                pagination: true,
                items : 1     
                });
                $('.item').mouseover(function(){
                $(this).find('.fullinfo').css({'display' : 'block'});
                });
                $('.item').mouseleave(function(){
                $(this).find('.fullinfo').css({'display' : 'none'});
                });
            $('.close_work_item').click(function(){
              $(this).css({'color' : 'red'});
              $(this).parents('#add_block').empty();
            });
          });
        });

Цитата:

Сообщение от skuty

$(this).parents('.grey').r emoveClass('animated_mid fadeInDown');
$(this).parents('.grey').a ddClass('animated_mid fadeInDown').css({'display' : 'block'});

Зачем ты удаляешь класс и тут же его добавляешь? В чем смысл?

Цитата:

Сообщение от skuty

.css({'display' : 'block'})

Это сокращается до .show()

Цитата:

Сообщение от skuty

                $('.item').mouseov er(function(){
                $(this).find('.ful linfo').css({'display' : 'block'});
                });
                $('.item').mousele ave(function(){
                $(this).find('.ful linfo').css({'display' : 'none'});
                });

Почему бы не делать это через css (псевдокласс :hover)?

Цитата:

Сообщение от skuty

$('.close_work_item').click(..)

Этот код будет навешивать обработчик при каждом клике, то есть обработчики будут плодиться, ты вкурсе?

Тоже касается и owlCarousel - зачем при каждом клике вызывать?

Поменяй html с:

<div id="work_item1">

на:

<div class="work_item" data-work="1">

Тогда js будет таким:

$('.work_item').click(function(){
    var workId = $(this).data('work');
    $('#add_block').load('/portfolio-list.html #work' + workId + ' > *', function() {
        $(this).parents('.grey').show();
    });
});

Решай вышеозвученные вопросы и будет все пучком.

Цитата:

Сообщение от skuty

'/portfolio-list.html #work1 > *'

А вобще, если по-нормальному делать, то сервак должен отдать только то, что требуется, а не всю страницу целиком. Но как временный костыль, можно и так.