Курс JS: js.itgid.info Курс вестки: html.itgid.info Интернет магазин на Node: node.itgid.info Плейлист: goo.gl/63osiv Телеграм: t.me/jsrules Мои курсы: itgid.info
Здравствуйте, Алексей. Спасибо за уроки, очень помогают. Очень нужно видео, выбор товаров по параметрах, как на hotline - как связать таблицы характеристик, бренда, категории, цены, скидки и вывести через php. Спасибо. Надеюсь Вы прочитаете комментарий.
В теории может быть ошибка из-за того что событие клика генерируется и при выключении чекбокса .Можно просто проверить в начали состояние включёности елемента и на этом экономить память и не выполнять дальнейших операций если мы его выключаем
Количество проверок можно уменьшить вдвое. При включении чекбокса надо проверить, не включены ли два других одновременно. И если да, то отключить один из них.
Здравствуйте, Алексей. Сколько себя помню, мне всегда говорили, что избыточность кода это плохой показатель и наличие повторяющихся циклов тому свидетельство. Можно ли его оптимизировать ибо для реализации в интернет магазине такое вряд ли сработает при 40 вариантах checkbox-ов будет 40х30 циклов?
Ух, прошел год и наткнулся на это видео. Классная идея, но у Алекса не совсем удачная вышла реализация по двум причинам. 1. Большое количество проверок, которое в самом деле можно сократить вдвое. 2. UI/UX страдает от того, что происходит неправильное отключение чекбоксов. Разберем на примере из видео: 2.1. Мы выбрали Быстро 2.2. Мы выбрали Дешево 2.3 Мы выбрали Качественно и отключилось Дешево 2.4 Пользователь не понимает, почему отключился пункт меню, который он только что выбрал. В 2.4 лучше отключить Быстро, так как он был нажат раньше, чем Дешево. Это не вызовет фрустрации от того, что мы выключили то, что пользователь секунду назад включил. Как же будет выглядеть такая логика дальше? Пользователь нажмет на Быстро и выключится Дешево, нажмет на Дешево - выключится Качественно. То есть нам нужно выключать пред-предыдущий элемент. Тем самым мы не вызываем фрустрации у пользователя, так как не отключаем предыдущий элемент и сохраняем логику - всегда отключается пред-предыдущий элемент.
а можно было сделать так: даем value 1,2,3- пробегаем по массиву чекбоксов- определяем текущего последнего чекеда value и делаем исключение 3 switch\case ////а можно было бы и через reduce()тогда еще в 2 раза меньше кода//// ____________________________________________________________________________ document.querySelectorAll('input').forEach(element => { element.addEventListener('click', function (element) { chekk(element); }); }, this); var chekk = function (checkBox) { let allCheks = Array.from(document.querySelectorAll('input')); let chekedArr = allCheks.filter(function (el) { return el.checked; }); if (chekedArr.length == 3) { switch (checkBox.target.value) { case '1': chekedArr[2].checked = false; break; case '2': chekedArr[0].checked = false; break; case '3': chekedArr[1].checked = false; break; } } }
Стилизовать чекбоксы и радио лучше так: 1) Ставим чекбокс (а можно радио) и сразу за ним label 2) Даем чекбоксу id, а элементу label такое-же значение атрибута for 3) В CSS делаем чекбоксу position: absolute; height: 1px; width: 1px; opacity: 0; (Не скрываем совсем чтобы браузерной подсказке "Отметьте флажок" было к чему присосаться.) 4) Даем элементу label position: relative; padding-left: 50px (Выбирайте сами, в зависимости от своей задачи). 5) Пора нарисовать сам флаг. Пользуемся комбинациями селекторов: input[type="checkbox"] + label:after {стили для неотмеченного чекбокса} и input[type="checkbox"]:checked + label:after {стили для отмеченного чекбокса}. В этих стилях обязательно используем content: "": иначе элемент не появится. Таким образом можно получить эффективную конструкцию без лишнего мусора и на голом css, без использования js и подключения лишних библиотек.
Во-первых, без JS не сделать так просто, чтобы только два из трёх можно было включить. Во-вторых, эти библиотеки - это всего лишь css файл с набором стилей. Забираешь нужные, вставляешь в свой файл, вжух! Хотя твой метод тоже широко известный в узких кругах приём.
Простите что слегка не на том видео. Но тут просмотров больше будет ) В вашем видео 'Работаем с Animate.css делаем слайдер на JS' столкнулся с любопытной проблемой. Ничего не работает ))) При загрузке сайта (с хрома) Animate происходит один раз анимация и все. Больше там анимации не работают. Так же в фаерфоксе. При разработке вообще ничего не работает. А вот в опере(vpn) и IE11 все ок!!! С мобилы на хроме тоже все норм. Попытка отследить проблему - DevTools - Security выдает unknown/canceled - для загрузки кода jquery. Есть идеи как разрешить загрузку?? Спасибо. Видео уже лайкнул )
это уже не программирование, а велосипед, куда столько ифов. Пишется это все просто и короче намного, через массив и одним циклом прогоняем. И там уже одной переменной регулируем лимит чеков. Что если понадобится вам добавить 5 чекбоксов или убрать, писать опять эти ифы? Да и не красиво это дико, мне лично неприятно было бы от такого решения и я искал бы другой путь решения, а вы еще и людей учите... Я не злой человек, но вот это чушь полная. На быструю руку что-то типо такого jsfiddle.net/h2Lx6rqn/
С ходом мысли согласен, но в коде есть принципиальная ошибка: вы не даёте включить третий чекбокс, а бизнес-логика подразумевает, что он включается, но что-то отлетает. Хочешь качественно и быстро? Не вопрос, плати дорого. Не хочешь платить дорого, ок, что-то отвалится, либо качество, либо скорость. И так далее, в этом весь юмор. Я как увидел тему видео, думаю, дай себе запилю, а потом сравню. Так у меня Math.random() определяет, что отлетит в итоге. По моему, это больше всего соответствует духу разработки ))
мне например заходят уроки. Я натыкался на пару других видосов по джс и там как раз таки все делают прям уже прошаренно А тут пусть и с неправильными подходами (допустим как карусель на их канале), но зато понятно как и что
