Привет народ 🙌
Сегодня я закончил 10 видео JavaScript30!
Проект 10: удерживайте Shift, чтобы установить несколько флажков
Источник: https://javascript30.com
Уроки:
Итак, давайте начнем с входа в консоль!!
- Мы можем выполнить console.log того, что мы запрашиваем, чтобы проверить, правильно ли мы выбрали элементы.
let checkbox = document.querySelectorAll('input[type="checkbox"]'); console.log(checkbox);
- Флажок представляет собой массив элементов ввода, поэтому мы можем добавить прослушиватель событий для каждого элемента, перебирая их в цикле.
checkbox.forEach(input => input.addEventListener('click', handleCheck));
- Мы можем использовать console.log для проверки прослушивателя событий.
function handleCheck(e){ console.log(e); }
- Теперь мы создаем переменную, которая хранит, какой элемент был проверен
let lastChecked;function handleCheck(e){ lastChecked = this; }
- Проверьте, была ли нажата клавиша Shift и установлен ли флажок!!
function handleCheck(e){ if(e.shiftKey && this.checked){ }lastChecked = this; }
- Создайте проверочную переменную со значением по умолчанию false и переберите каждый элемент флажка.
- Если элемент флажка равен значению lastChecked или элементу, по которому был нажат Shift, значение переменной устанавливается на противоположное значение.
- Если значение переменной равно true, флажок устанавливается, что делается с помощью следующего кода!
let lastChecked;function handleCheck(e) { let inBetween = false; if (e.shiftKey && this.checked) { // loop over every single checkbox checkboxes.forEach(checkbox => { if (checkbox === this || checkbox === lastChecked) { inBetween = !inBetween; } if (inBetween) { checkbox.checked = true; } }); }lastChecked = this; }
Сегодня я узнал (Т-И-Л):
- e.shiftKey && this.checked — ЭТО БЫЛО ПРОСТО КРУТО
Это все на 10 день ✅
Спасибо за внимание.Увидимся завтра!