не так работает событие click
всем привет!
есть div <div class="menu-o"> ему присваивается класс TweenMax.set('.menu-o', {className: '+=openmenu'}); и по этому классу событие $('.openmenu').click(function() { TweenMax.to('.blackfonmenu' , 1, {transform: 'translateY(0)'}); TweenMax.set('.menu-o', {className: '-=openmenu'}); TweenMax.set('.menu-o', {className: '+=closemenu'}); }); $('.closemenu').click(function() { TweenMax.set('.menu-o', {className: '+=openmenu'}); TweenMax.set('.menu-o', {className: '-=closemenu'}); TweenMax.to('.blackfonmenu' , 1, {transform: 'translateY(-100vh'}); }); первая функция работает как нужно без проблем, а вторая вообще не работает. как побороть это, подскажите? Спасибо! |
<style> .openmenu { border:1px solid green; } .closemenu { border:1px solid red;} </style> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <div class="menu-o">div</div> <script> $('.menu-o').addClass('openmenu'); $('.menu-o').click(function() { var trans = $(this).hasClass('openmenu') ? 'translateY(0)' : 'translateY(-100vh)'; $(this).toggleClass('openmenu closemenu'); alert(trans); // TweenMax.to('.blackfonmenu' , 1, {transform: trans}); }); </script> |
TweenMax.to('.blackfonmenu' , 1, {transform: 'translateY(-100vh)'});
|
огромное спасибо!
|
Можно вопрос в вашей теме? Почему у меня выдаёт ошибку на 4-й строке? Пишет, что "а" null. (1-я строка из html) Я в тупике, вроде бы всё верно.
1. <input type="submit" value="1" id="a"> 2. <script> 3. var a = document.getElementById('a'); 4. a.onclick = go; 5. function go() { 6. alert(a.getAttribute('value')); 7. } 8. <script> |
АндрейD,
<input type="submit" value="1" id="a"> <script> var a = document.getElementById('a'); a.onclick = go; function go() { alert(a.getAttribute('value')); } </script> может не в этом куске кода дело? |
Цитата:
|
рони,
не из за этого ведь Цитата:
|
j0hnik,
тогда строка 1 идёт после строки 8, других вариантов не знаю. |
Цитата:
|
Цитата:
<input type="submit" value="1" onclick="go()" id="a"> а в js файл ставлю ту же строку: function go() { var elem = document.getElementById('a'); alert(a.getAttribute('value')); } то всё прекрасно работает. Но вызов var a = document.getElementById('a'); a.onclick = go; никак не идёт. |
АндрейD,
скрипт где после input или до? |
Он в прикреплённом файле js. Но я пробовал этот код размещать и в html, после input. Не помогло.
|
Вот пробую, alert показывает, что переменная "a" null. Что то странно.
var a = document.getElementById('a'); alert(a); |
Цитата:
|
Извините за опечатку в приведённом примере - писал его тут по памяти. Вот из редактора:
<input type="submit" value="1" id="a"> var a = document.getElementById('a'); a.onclick = go; function go() { alert(a.getAttribute('value')); } |
АндрейD,
работает? <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <input type="submit" value="1" id="a"> <script> var a = document.getElementById('a'); a.onclick = go; function go() { alert(a.getAttribute('value')); } </script> </body> </html> |
Да, работает. Ничего не понимаю - сейчас тоже скопировал свой код из js файла в html и заработало. В чём тогда причина? Уж и 'use strict' удалил. Спасибо за помощь! Вот если бы ещё разобраться - почему из отдельного файла не получается.
|
Дублирую сообщение
Итак, ответ я нашёл в книге "Шаблоны JS". Оказывается размещать ссылку (типа <script src="js/file_js.js"></script>) на прикреплённый файл js в <head> - это худший антишаблон! Правильнее всего прописывать её в конце страницы, перед закрывающим тегом </body>. Я это сделал и всё заработало!
|
АндрейD,
ниче не худший, нормальный шаблон, просто надо понимать как DOM устроен. |
Про "антишаблон" - цитата из книги, написанной экспертом по языку JavaScript Стояном Стефановым – ведущим специалистом компании Yahoo! и создателем инструмента оптимизации производительности веб-страниц YSlow 2.0.
|
Можно вопрос в вашей теме? Почему у меня выдаёт ошибку на 4-й строке? Пишет, что "а" null. (1-я строка из html) Я в тупике, вроде бы всё верно.
1. <input type="submit" value="1" id="a"> 2. <script> 3. var a = document.getElementById('a'); 4. a.onclick = go; 5. function go() { 6. alert(a.getAttribute('value')); 7. } 8. <script> |
8 ая сторка
</script> |
fslujrmu,
если код именно такой, достаточно уточнить строку 8. |
fslujrmu,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Можно вопрос в вашей теме? Почему у меня выдаёт ошибку на 4-й строке? Пишет, что "а" null. (1-я строка из html) Я вWorld knowledge тупике, вроде бы всё верно.
|
Часовой пояс GMT +3, время: 16:07. |