В js вообще не шарю, хотел бы спросить у опытных код написан нормально 1 и 2? А то как-то скопировал вставил да работает а горький опыт подсказывает брать так просто с гугла .. в общем сомнения мучают что не знаю JS и код поставил на проект лайв 1 Код (Javascript): <script> $(function() { $(window).scroll(function() { if ($(window).scrollTop() >= 70) { $(".header").addClass('smaller'); } else { $(".header").removeClass("smaller"); } }); }); </script> 2 Код (Javascript): <script> $(document).ready(function() { var playing = false; $('button').click(function() { $(this).toggleClass("down"); if (playing == false) { document.getElementById('player').play(); playing = true; } else { document.getElementById('player').pause(); playing = false; } }); }); </script>
Ничего криминального в этом коде нет. Да, можно оптимизировать, можно переписать без использования jQuery нативным JS, но на таком объёме можете не заморачиваться.
P.S. Если будет нужно, то вот этот же код на чистом JS Код (Javascript): const header = document.querySelector('.header'); window.addEventListener('scroll', e => { header.classList[(window.pageYOffset || document.documentElement.scrollTop) >= 70 ? 'add' : 'remove']('smaller'); }); document.querySelector('button').addEventListener('click', e => { e.target.classList.toggle('down'); player[player.paused ? 'play' : 'pause'](); });
Спасибо, за подсказки )) Хотел еще спросить 2 код нужно обернуть в $(function(){ или оставить лучше так как есть?
Код можно разместить в конце документа, где-нибудь перед закрывающим тегом </body> или же в <head>. В первом случае никаких дополнительных действий не нужно, а во втором - необходимо отложить выполнение до загрузки DOM и, соответственно, обернуть код нужно: Код (Javascript): // С использованием jQuery $(function(){ }); // или $(document).ready(function(){ }); // На нативном JS document.addEventListener( 'DOMContentLoaded', function() { }, false );
@Неугомонный, $(function(){}); - это всего лишь укороченный вариант записи $(document).ready(function(){}); и естественно, что использовать одну внутри другой абсолютно бессмысленно.
Спасибо. Код (Javascript): if ($(window).scrollTop() >= 70) { $(".shapka").addClass('smaller'); $(".blockpodshapkoy").addClass('smaller'); можно записать как-то так $(".shapka .blockpodshapkoy").addClass('smaller');, будет ли работать ?Ведь я использую один и тот же класс 'smaller для двух блоков
@Неугомонный учили бы вы javscript если хотите программировать: Код (Javascript): el.classList.add("foo") - добавление элементу класс "foo" el.classList.remove("bar") - удаление класса "bar" el.classList.toggle("foo") - переключение класса "foo" el.classList.contains("foo") - возвращает "true" если у класса есть класс "foo" el.classList.add( "foo", "bar" ); - добавление нескольких классов или поучили jquery: Код (Javascript): $("#header") — получение элемента с id=«header» $(«h3») - получить все <h3> элементы $(«div#content .photo») - получить все элементы с классом =«photo» которые находятся в элементе div с id=«content» $(«ul li») - получить все <li> элементы из списка <ul> $(«ul li:first») - получить только первый элемент <li> из списка <ul> сколько у вас вопросов тут было, вы ничему и не научились. У вас вопросы из серии - можно скрестить жопу с писькой, нет, а вот ногу с носом, можно да, а если вот это сюда засунуть оно поедет. И толку вам от таких вопросов?
Можно записать любое количество селекторов через запятую. Т.е. ваш код будет иметь следующий вид: Код (Javascript): $(".shapka, .blockpodshapkoy").addClass('smaller'); И вообще, к селекторам относитесь так же, как если бы вы работали с CSS. Принцип один и тот же.
Я сообразил то что хотел с горем пополам осталось только добавить анимацию будет https://jsfiddle.net/gbu8eahw/