Jump to content
  • 0

Помогите понять код


bgraf
 Share

Question

Здравствуйте!

Помогите понять код пожалуйста.

Код взят с сайта, название не буду говорить да бы не делать рекламу ;-), в браузере chrome изучал код страницы и набрел вот на это:


<div id="avatar_container">
<span class="project_tools_del del_avatar">

<a href="#">Удалить</a></span>
<div class="top_block"></div>
<div class="avatar">
<img src="/uploads/public/user/4/39023/180x180crop_1366100577_avatar_4_objects_menedzher_39023.jpg">
</div>
</div>

при нажатии на Удалить аватарка исчезает при этом страница не перезагружается.

Объясните, что происходит? Где вызывается функция которая закрывает аватарку?

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Просто сам тег А не имеет ни класса ни id и обработчик события onclick() привязан с помощью селекторов родительского элемента, то есть к примеру так если используется jQuery:


$(".project_tools_del.del_avatar a").click(function(){
alert("вы кликнули по ссылке");
});

Edited by wwt
Link to comment
Share on other sites

  • 0

Просто сам тег А не имеет ни класса ни id и обработчик события onclick() привязан с помощью селекторов родительского элемента, то есть к примеру так если используется jQuery:


$(".project_tools_del.del_avatar a").click(function(){
alert("вы кликнули по ссылке");
});

а если не jQuery ???

В js привязано событие на клик мыши, js слушает событие, и при нажатии выполняет некоторые действия.

так вот мне и не понятно как привязать событие?

вернее нет <a href="#" onclick="do_something()" > это я могу понять, а вот как в примере и без jquary не понятно

Edited by bgraf
Link to comment
Share on other sites

  • 0

без jQuery намучаетесь:

1. например ксли хотите что бы все работало в старых браузерах, то кроссброузерная реализация навешивания евента такая:

http://javascript.ru...ons#10-addevent

2. Так же если хотите выбрать по классу, то в html5 без проблем, но если хотите старые браузеры, то тут вот такая примерно простыня:

http://javascript.ru...elementsbyclass

а Вам еще childNode нужно выбрать

В общем, Вам лучше jQuery

Я еще не говорю о том что Вам может понадобиться onReady, который тоже на нативном js представляет собой большую простыню.

Edited by Zippovich
  • Like 1
Link to comment
Share on other sites

  • 0

без jQuery намучаетесь:

1. например ксли хотите что бы все работало в старых браузерах, то кроссброузерная реализация навешивания евента такая:

http://javascript.ru...ons#10-addevent

2. Так же если хотите выбрать по классу, то в html5 без проблем, но если хотите старые браузеры, то тут вот такая примерно простыня:

http://javascript.ru...elementsbyclass

а Вам еще childNode нужно выбрать

В общем, Вам лучше jQuery

Я еще не говорю о том что Вам может понадобиться onReady, который тоже на нативном js представляет собой большую простыню.

Подскажите ссылку на стоящий пример с JQuery пожалуйста

Link to comment
Share on other sites

  • 0

без jQuery намучаетесь:

1. например ксли хотите что бы все работало в старых браузерах, то кроссброузерная реализация навешивания евента такая:

http://javascript.ru...ons#10-addevent

2. Так же если хотите выбрать по классу, то в html5 без проблем, но если хотите старые браузеры, то тут вот такая примерно простыня:

http://javascript.ru...elementsbyclass

а Вам еще childNode нужно выбрать

В общем, Вам лучше jQuery

Я еще не говорю о том что Вам может понадобиться onReady, который тоже на нативном js представляет собой большую простыню.

Подскажите ссылку на стоящий пример с JQuery пожалуйста

Откройте примеры на официальном сайте. там достаточно информации.

Но я бы на вашем месте для начала разобрался с html , DOM и как javascript с ним контактируют. Во всяком случае вас перестанут минусовать за вопросы до которых вы еще не доросли.

Edited by wwt
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Вот тут есть актуальный список бесплатных тестов с сертификацией https://www.classcentral.com/report/free-certificates/ Обратите внимание на HackerRank, там есть тест с сертификацией непосредственно по CSS
    • Нужно сверстать по картинке меню-бар. Не получается сделать вот это поле поиска <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style> .nav {     display: flex;     list-style-type: none;     padding-left: 0;     font-size: 17px;     text-transform: uppercase; } .nav > li > a {     color: #fff;     text-decoration: none; } .nav > li {     padding-left: 29px;     margin-left: 30px; } .header {     display: flex;     background-color: #31485b;     justify-content: space-between;     align-items: center; }   .sidebar {     width: 410px;     display: block;     padding-right: 20px;     margin: auto;     margin-left: 250px; }   ul.nav li a:hover {     background-color: #687c8d;     padding: 17.2px 35px; }   input[type="text"], input[type="search"] {   background-color: #687c8d;   width: 60%;   padding: 8px;   margin: 0 50px }   input[type="search"] {     color: #31485b;     font-style: italic; }     </style> </head> <body>     <div class="header">                 <ul class="nav">                     <li class="s1"><a href="#">Главная</a></li>                     <li><a href="#">Блог</a></li>                     <li><a href="#">Сервисы</a></li>                     <li><a href="#">Онлайн-профессии</a></li>                     <li><a href="#">О сайте</a></li>                 </ul>                                 <div class="sidebar">                     <form method="post" action="#" id="search_form" >                       <input type="search" name="search_field" placeholder="Поиск" />                     </form>                   </div>     </div> </body> </html>  
    • ЭЭ, а почему оно должно удалять? Может стоило повесить событие на эту кнопку и указать, что при это должно происходить?
    • например -R не будет качать указанные файлы если вы знаете список нужных вам файлов, проще их указать или можно написать парсер
    • выкладывайте код в песочнице, так будет проще У вас media подключается до blocks/header, по этому правила из blocks/header перекрывают media сверху вниз в css пишите tag .class ... @media и не будет у вас подобных проблем  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy