Форум

Samsam · #1 (**permalink**) 12.05.2017, 20:05

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

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

рони · #2 (**permalink**) 12.05.2017, 20:25

Сообщение от Samsam

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

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

Сообщение от Samsam

как сделать

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

Samsam · #3 (**permalink**) 12.05.2017, 21:34

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

рони · #4 (**permalink**) 12.05.2017, 21:38

Samsam,
с классом?

рони · #5 (**permalink**) 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>

рони · #6 (**permalink**) 12.05.2017, 21:52

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

Samsam · #7 (**permalink**) 12.05.2017, 22:03

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

рони · #8 (**permalink**) 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 · #9 (**permalink**) 12.05.2017, 22:11

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

рони · #10 (**permalink**) 12.05.2017, 22:17

Сообщение от Samsam

на jquery на много легче!

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

Форум

Справочник

Discord чат

Курсы javascript