jQuery для чайників ч.4 - функції

В першій статті, ми почали розглядати основи jQuery - типи даних і селектори;

Далі, ми дізналися про події jQuery;

В минулій статті, ми навчилися оброблювати помилки;

Сьогодні, ми поговоримо про:

• Як запустити функцію;
• Як передати дані в функцію;
• Як написати простий if;
• Як створити просту навігацію;

Давайте зробимо це!

Що таке jQuery функція?

Функції - це спосіб групування вашого коду, це блок коду, який дозволяє виконувати конкретне завдання. Поділ коду на функції, робить його більш зручним для читання і підтримує організованість коду.

Приклад простої функції:

    function highlightItem(){
        $('#gallery li').addClass('active');
    }

Ця функція буде додавати клас .active до елемента списку #gallery.

Ви можете назвати свої функції так, як вам подобається, але краще, коли назва описує її задачі.

Виконання функції

Ви можете запустити вашу функцію при завантаженні сторінки або при виконанні певної події (наприклад, користувач натискає на щось).

Докладніше про події.

    $(document).ready(function() {
        highlightItem();
    });

Цей код буде спрацьовувати при завантаженні сторінки і додавати клас active для всіх елементів галереї.

Спробуйте CodePen демо-внизу цього посту.

Функція викликається при завантаженні сторінки, якщо вона містить якійсь установки або початкові завдання.

Виклик функції

Інший варіант - запуск функції на основі певної події.

    var $galleryElement = $('#gallery li');
     
    $galleryElement.on('click', function() {
        highlightItem();
    });
     
    function highlightItem(){
        $('#gallery li').addClass('active');
    }

Це додасть клас active для всіх елементів галереї, але ми хочемо виділити тільки той елемент, на який натиснув користувач.

Передача даних у функцію

$(this), всередині click-функції відноситься до елемента, на який натиснув користувач.

Ми можемо просто створити нову змінну $item всередині click-функції і передати її через highlightItem() функцію:

    $galleryElement.on('click', function() {
        var $item = $(this);
        highlightItem($item);
    });
     
    function highlightItem($item){
        $item.toggleClass('active');
    }

Ми також змінюємо addClass()на toggleClass() для переключення між активним класом і no-класом.

Наведений вище код буде додати або видалити клас .active з вибраного елемента.

Круто?

Проста навігація

Тепер у нас є підсвічування, але що робити, якщо ми хочемо створити просту навігацію - Назад/Далі?

Виконання highlightItem() функції для навігаційних елементів означає, що $(this) буде посилатися на кнопки Назад/Далі і не буде працювати. Нам потрібно знати, який елемент передавати до highlightItem() функції.

Кнопка Далі

    // Next button
    $nextLink.on('click', function() {
        var activeItemIndex = $('#gallery').find('li.active').index(),
            newIndex = activeItemIndex + 1,
            $item = $galleryElement.eq(newIndex);
     
        highlightItem($item);
    });

activeItemIndex - це індекс елемента з класом active. При завантаженні сторінки, activeItemIndex позначає індекс елемента, який має клас в html. Ми створюємо newIndex, який activeItemIndex плюс 1. В кінці ми передаємо елемент, індекс якого збігається з newIndex до highlightItem() функції.

Кнопка Назад

Вона буде працювати точно так само, як і $nextLink, різниця в тому, що ми віднімаємо 1, а не додаємо.

    $prevLink.on('click', function() {
        var activeItemIndex = $('#gallery').find('li.active').index(),
            newIndex = activeItemIndex - 1,
            $item = $galleryElement.eq(newIndex);
     
        highlightItem($item);
    });

Тепер це працює прекрасно, але ми можемо і повинні оптимізувати цей процес. Проблема в тому, що ми дублюємо досить багато коду.

Намагайтесь зробити все максимально просто

Ообидві кнопки роблять те ж саме. Єдина різниця полягає в тому, що $prevLink \- це віднімання 1, $nextLink додає 1.

Ми могли б об'єднати ці функції в одну з допомогою простого оператора if.

    $prevLink.add($nextLink).on('click', function() {
        var activeItemIndex = $('#gallery').find('li.active').index();
     
        if($(this).attr('id') == 'nextLink'){
            newIndex = activeItemIndex + 1;
        } else {
            newIndex = activeItemIndex - 1;
        }
     
        $item = $galleryElement.eq(newIndex);
     
        highlightItem($item);
    });

Обидва посилання навігації використовують .add() і додавання 1 до activeItemIndex для посилань з id="nextLink". Якщо посилання не має цей ідентифікатор, ми віднімаємо 1.

If

Ми можемо піти ще далі і зупиняти навігацію при досягнені першого або останнього елемента. Це може бути зроблено шляхом вкладання ще одного if і перевірки значення activeItemIndex.

    $prevLink.add($nextLink).on('click', function() {
     
        // Забезпечує фіксацію положення сторінки
        event.preventDefault();
     
        var activeItemIndex = $('#gallery').find('li.active').index();
     
        if($(this).attr('id') == 'nextLink'){
     
            if( activeItemIndex < 2 ){
                newIndex = activeItemIndex + 1;
            }
     
        } else {
     
            if( activeItemIndex > 0 ){
                newIndex = activeItemIndex - 1;
            }
     
        }
     
        $item = $galleryElement.eq(newIndex);
     
        highlightItem($item);
    });

Зараз ми додаємо 1, коли у елемента є ідентифікатор nextLink та activeItemIndex менше 2 і віднімаємо 1, якщо ідентифікатора немає та значення activeItemIndex більше 0.

Ми також включили event.preventDefault(), для збереження поточної позиції сторінки. Посилання href # прокручує сторінку вгору за замовчуванням.