Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Действие в определённом блоке (https://javascript.ru/forum/dom-window/68842-dejjstvie-v-opredeljonnom-bloke.html)

Samsam 12.05.2017 20:05

Действие в определённом блоке
 
<div id=test>1</div>
<div id=test>2</div>
<div id=test>3</div>

Есть несколько блоков с одним и тем же İD. как сделать так что бы при нажатие на один из этих блоков выполнялось действие именно в этом блоке. Допустип .css('display', 'none')

рони 12.05.2017 20:25

Цитата:

Сообщение от Samsam
несколько блоков с одним и тем же İD

это неправильно(лучше class), но не критично.
Цитата:

Сообщение от Samsam
как сделать

установить обработчик на данные блоки или их родитель(делегирование)

Samsam 12.05.2017 21:34

Если можно Приведите маленькие примеры

рони 12.05.2017 21:38

Samsam,
с классом?

рони 12.05.2017 21:47

Samsam,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hide{
    display: none;
  }

  </style>

  <script>
      window.addEventListener('DOMContentLoaded', function() {
         [].forEach.call(document.querySelectorAll('.test'), function(item) {
                 item.addEventListener('click', function() {
                 item.classList.add("hide")
                 });
             });
          });
  </script>
</head>

<body>

 <div class=test>1</div>
 <div class=test>2</div>
 <div class=test>3</div>


</body>
</html>

рони 12.05.2017 21:52

Samsam,
пример с делегированием

Samsam 12.05.2017 22:03

а можно этот пример сделать с использованием jquery

рони 12.05.2017 22:09

Samsam,
:-?
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>
$(function() {
    $(".test").on("click", function() {
    $(this).hide()
})
});
  </script>
</head>

<body>
<div class=test>1</div>
 <div class=test>2</div>
 <div class=test>3</div>

</body>
</html>

Samsam 12.05.2017 22:11

Cпасибо! на jquery на много легче!

рони 12.05.2017 22:17

Цитата:

Сообщение от Samsam
на jquery на много легче!

5 строк на js или 20005 на jquery -- выбор за вами

Samsam 12.05.2017 22:26

2 cтроки не считая саму библиотеку. В любом случаи вы правы но метод с jquery мне показался легче хотя как понимаю я использую одну тысячную из всего jquery когда можно написать всего 5 строк без использования библиотеки


Часовой пояс GMT +3, время: 02:41.