PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
leshiy
Отправлено: 23 Марта, 2020 - 15:18:13
Post Id


Частый гость


Покинул форум
Сообщений всего: 171
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




Есть код на jquery который открывает и закрывает определенные блоки при кликах по кнопкам или вне этих блоков.Помогите переделать его на javascript.
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <html><head>
  3. <link href="//leshiy-game.ru/css.css" rel="stylesheet" type="text/css">
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  5. </head>
  6. <body>
  7. <div id="gl-blocl" class="gl"><div class="hv"><div class="hvv"><div class="tab vlr"><div id="b4" class=""><p></p></div><div id="vpr" class="fl">
  8. </div></div><div class="tab vc"></div><div class="tab vlr"><div id="b1" class="sear"><span class="wpo">Поиск</span></div><div id="b2" class="vn"><span class="wcat">Категории</span></div><div id="b3"><p></p></div></div></div></div><div class="vn-g"><div class="vn-n b7"></div></div><div id="h-n"><div class="hvv b7"><div class="h-n-sh"><div class="h-nl"><div class="h-n-v">
  9. <div id="n-str"></div></div></div><div id="col3"><div class="gl3"><div id="r-str"></div></div></div><div gl-cen><div class="h-n-tab"><div class="h-n-v"></div></div></div></div></div></div><div class="misk" id="mpois"><form id="po" class="form-p" action="/search.html" method="post"><input type="text" placeholder="Поиск" name="q" id="who" autocomplete="off" min="3"><button type="submit" name="sub" id="poisk-m">Искать</button></form></div><div id="v-p"></div><div id="kr"><span id="krol" class="4267"></span></div><div class="" id="men1"><ul><li id="b5" class="kn-cat">Категории</li><li id="b6">Сортировать</li><li id="vprm">
  10. </li></ul></div>
  11. <div class="mcat-all b7" id="m-cat"><ui id="categor">
  12. категории
  13. </ui><a href="/categor.html" id="v-cat" class="block">Все категори</a></div>
  14. <div id="fon">
  15.     <div id="sort" class="msor"><ul><b id="n-sort">Сортировать по: </b><li class="desc" id="id">Дате</li><li class="sort" id="view">Популярности</li><li class="sort" id="title">Алфавиту</li><li class="sort" id="prod">Времени</li><li class="sort" id="rating">Рейтингу</li><li class="sort" id="com">Комментариям</li></ul></div></div>
  16. <script>
  17. var rels=[['#b1','.isk'],['#b2','.cat-all'],['#b3','.misk'],['#b4','#men1 ul'],['#b5','.mcat-all'],['#b6','.msor']];var loop=function loop(i){var btn=rels[i][0];var block=rels[i][1];$(btn).click(function()
  18. {if(btn=='#b5'){var cat=document.getElementById("gl-block").className;$.ajax({url:"index.php",type:'POST',data:"v_cat=vc&cat_adr="+cat,success:function(html)
  19. {$("#categor").html(html);}});}$(block).toggle();if($('.isk').css('display')=='block'){document.getElementById('b1').className='sear actkn'}else{document.getElementById('b1').className='sear'}if($('.isk').css('display')=='block'||$('.cat-all').css('display')=='block'||$('.mcat-all').css('display')=='block'||$('.misk').css('display')=='block'||$('#men1 ul').css('display')=='block'||$('.msor').css('display')=='block')
  20. {$('#h-n').hide();}else{$('#h-n').show();}if($('.mcat-all').css('display')=='block'){$('#men1 ul').hide();}});};for(var i=0;i<rels.length;i++){loop(i);}$(document).click(function(event)
  21. {for(var i=0;i<rels.length;i++){var btn=rels[i][0];var block=rels[i][1];var $btn=$(btn);var $block=$(block);if($("#mpois").css("display")=="block")
  22. {$("#who").focus();}if($btn.is(event.target)||$block.is(event.target)||$btn.has(event.target).length||$block.has(event.target).length)continue;var bpois=$("#v-p");var mpois=$('#mpois');if(bpois.css('display')=='block')
  23. {if(!bpois.is(event.target)&&bpois.has(event.target).length===0&&!mpois.is(event.target)&&mpois.has(event.target).length===0){bpois.hide();mpois.hide();}}else{$(block).hide();}if($('.cat-all').css('display')=='block'){if(document.getElementById('b2'))
  24. {document.getElementById('b2').className='vvr actkn'}}else{if(document.getElementById('b2')){document.getElementById('b2').className='vn'}}if($('.isk').css('display')=='block'){if(document.getElementById('b2'))
  25. {document.getElementById('b1').className='sear actkn'}}else{if(document.getElementById('b2'))
  26. {document.getElementById('b1').className='sear'}}if($('.isk').css('display')=='block'||$('.cat-all').css('display')=='block'||$('.mcat-all').css('display')=='block'||$('.misk').css('display')=='block'||$('#men1 ul').css('display')=='block'||$('.msor').css('display')=='block'){$('#h-n').hide();}else{$('#h-n').show();}}});
  27.    </script>
  28. </body></html>
 
 Top
Vladimir Kheifets
Отправлено: 23 Марта, 2020 - 17:26:32
Post Id



Посетитель


Покинул форум
Сообщений всего: 511
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 24 раз(а)




leshiy пишет:
Есть код на jquery который открывает и закрывает определенные блоки при кликах по кнопкам или вне этих блоков.Помогите переделать его на javascript.
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <html><head>
  3. <link href="//leshiy-game.ru/css.css" rel="stylesheet" type="text/css">
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  5. </head>
  6. <body>
  7. <div id="gl-blocl" class="gl"><div class="hv"><div class="hvv"><div class="tab vlr"><div id="b4" class=""><p></p></div><div id="vpr" class="fl">
  8. </div></div><div class="tab vc"></div><div class="tab vlr"><div id="b1" class="sear"><span class="wpo">Поиск</span></div><div id="b2" class="vn"><span class="wcat">Категории</span></div><div id="b3"><p></p></div></div></div></div><div class="vn-g"><div class="vn-n b7"></div></div><div id="h-n"><div class="hvv b7"><div class="h-n-sh"><div class="h-nl"><div class="h-n-v">
  9. <div id="n-str"></div></div></div><div id="col3"><div class="gl3"><div id="r-str"></div></div></div><div gl-cen><div class="h-n-tab"><div class="h-n-v"></div></div></div></div></div></div><div class="misk" id="mpois"><form id="po" class="form-p" action="/search.html" method="post"><input type="text" placeholder="Поиск" name="q" id="who" autocomplete="off" min="3"><button type="submit" name="sub" id="poisk-m">Искать</button></form></div><div id="v-p"></div><div id="kr"><span id="krol" class="4267"></span></div><div class="" id="men1"><ul><li id="b5" class="kn-cat">Категории</li><li id="b6">Сортировать</li><li id="vprm">
  10. </li></ul></div>
  11. <div class="mcat-all b7" id="m-cat"><ui id="categor">
  12. категории
  13. </ui><a href="/categor.html" id="v-cat" class="block">Все категори</a></div>
  14. <div id="fon">
  15.     <div id="sort" class="msor"><ul><b id="n-sort">Сортировать по: </b><li class="desc" id="id">Дате</li><li class="sort" id="view">Популярности</li><li class="sort" id="title">Алфавиту</li><li class="sort" id="prod">Времени</li><li class="sort" id="rating">Рейтингу</li><li class="sort" id="com">Комментариям</li></ul></div></div>
  16. <script>
  17. var rels=[['#b1','.isk'],['#b2','.cat-all'],['#b3','.misk'],['#b4','#men1 ul'],['#b5','.mcat-all'],['#b6','.msor']];var loop=function loop(i){var btn=rels[i][0];var block=rels[i][1];$(btn).click(function()
  18. {if(btn=='#b5'){var cat=document.getElementById("gl-block").className;$.ajax({url:"index.php",type:'POST',data:"v_cat=vc&cat_adr="+cat,success:function(html)
  19. {$("#categor").html(html);}});}$(block).toggle();if($('.isk').css('display')=='block'){document.getElementById('b1').className='sear actkn'}else{document.getElementById('b1').className='sear'}if($('.isk').css('display')=='block'||$('.cat-all').css('display')=='block'||$('.mcat-all').css('display')=='block'||$('.misk').css('display')=='block'||$('#men1 ul').css('display')=='block'||$('.msor').css('display')=='block')
  20. {$('#h-n').hide();}else{$('#h-n').show();}if($('.mcat-all').css('display')=='block'){$('#men1 ul').hide();}});};for(var i=0;i<rels.length;i++){loop(i);}$(document).click(function(event)
  21. {for(var i=0;i<rels.length;i++){var btn=rels[i][0];var block=rels[i][1];var $btn=$(btn);var $block=$(block);if($("#mpois").css("display")=="block")
  22. {$("#who").focus();}if($btn.is(event.target)||$block.is(event.target)||$btn.has(event.target).length||$block.has(event.target).length)continue;var bpois=$("#v-p");var mpois=$('#mpois');if(bpois.css('display')=='block')
  23. {if(!bpois.is(event.target)&&bpois.has(event.target).length===0&&!mpois.is(event.target)&&mpois.has(event.target).length===0){bpois.hide();mpois.hide();}}else{$(block).hide();}if($('.cat-all').css('display')=='block'){if(document.getElementById('b2'))
  24. {document.getElementById('b2').className='vvr actkn'}}else{if(document.getElementById('b2')){document.getElementById('b2').className='vn'}}if($('.isk').css('display')=='block'){if(document.getElementById('b2'))
  25. {document.getElementById('b1').className='sear actkn'}}else{if(document.getElementById('b2'))
  26. {document.getElementById('b1').className='sear'}}if($('.isk').css('display')=='block'||$('.cat-all').css('display')=='block'||$('.mcat-all').css('display')=='block'||$('.misk').css('display')=='block'||$('#men1 ul').css('display')=='block'||$('.msor').css('display')=='block'){$('#h-n').hide();}else{$('#h-n').show();}}});
  27.    </script>
  28. </body></html>
Добрый день!
Вы показали совершенно нечитаемый код.
Это Ваш код.
Спойлер (Отобразить)
Обратите внимание на то, что первый тэг <div id="gl-blocl" class="gl"> не закрыт.
Сомневаюсь,что jquery и/или javascript будут работать с дефектным html-кодом.
Удачи!

(Отредактировано автором: 23 Марта, 2020 - 17:28:07)

 
 Top
LIME
Отправлено: 24 Марта, 2020 - 14:22:05
Post Id



Активный участник


Покинул форум
Сообщений всего: 10617
Дата рег-ции: Нояб. 2010  


Помог: 320 раз(а)




Vladimir Kheifets пишет:
Сомневаюсь,что jquery и/или javascript будут работать с дефектным html-кодом.
еще как будут
вернее с html-кодом javascript(почему jquery выделен отдельно непонятно) вообще не работает
он работает с DOM-моделью построенной браузером
а там уж как парсер решит ее построить по невалидному тексту, такая она и будет
javascript-у фиолетово, он работает с валидным деревом уже после парсинга
а браузеры наперебой соревнуются - кто как ухитрится исправить ошибки валидности
эксперименты с XHTML не помогли


-----
DDD
 
 Top
Vladimir Kheifets
Отправлено: 26 Марта, 2020 - 08:43:18
Post Id



Посетитель


Покинул форум
Сообщений всего: 511
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 24 раз(а)




LIME пишет:
Vladimir Kheifets пишет:
Сомневаюсь,что jquery и/или javascript будут работать с дефектным html-кодом.
еще как будут
вернее с html-кодом javascript(почему jquery выделен отдельно непонятно) вообще не работает
он работает с DOM-моделью построенной браузером
а там уж как парсер решит ее построить по невалидному тексту, такая она и будет
javascript-у фиолетово, он работает с валидным деревом уже после парсинга
а браузеры наперебой соревнуются - кто как ухитрится исправить ошибки валидности
эксперименты с XHTML не помогли
LIME пишет:
Vladimir Kheifets пишет:
Сомневаюсь,что jquery и/или javascript будут работать с дефектным html-кодом.
еще как будут
вернее с html-кодом javascript(почему jquery выделен отдельно непонятно) вообще не работает
он работает с DOM-моделью построенной браузером
а там уж как парсер решит ее построить по невалидному тексту, такая она и будет
javascript-у фиолетово, он работает с валидным деревом уже после парсинга
а браузеры наперебой соревнуются - кто как ухитрится исправить ошибки валидности
эксперименты с XHTML не помогли

Добрый день!
"почему jquery выделен отдельно непонятно", потому что был задан конкретный вопрос
leshiy пишет:
Есть код на jquery который открывает и закрывает определенные блоки при кликах по кнопкам или вне этих блоков.
Помогите переделать его на javascript.

Верно, дом модели, браузеры наперебой соревнуются исправить ошибки валидности,
НО получатся ли при этом то, что хотелось бы увидеть в браузере и будет ли это
выглядеть одинаково во всех актуальных браузерах?
вот два примера, управления видимости блока по клику на чистом JS (так просили)
здесь потерян закрывающий тэг div и браузер сам "дододумал" DOM-модель
Спойлер (Отобразить)

здесь нет потеряных тэгов
Спойлер (Отобразить)

Результаты, однако, получаются разные, поэтому если Вы хотите правильно управлять видимостью блоков
т.е чтобы эти блоки по клику там, где хотелось бы появлялись бы в желаемом месте,
лучше самостоятельно исправить ошибки валидности html,
не полагаясь на искусственный интеллект, а потом уже заниматься jquery и/или javascript.
Удачи!

(Отредактировано автором: 26 Марта, 2020 - 08:46:45)

 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« Вопросы новичков »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB