Форум

qwe88 · #1 (**permalink**) 03.08.2015, 21:37

Добрый день!
Помогите, пожалуйста, решить задачу. Нужно что бы при клике по диву, выскакивал алерт с номером.
Что у меня не так?

<div class="test">
    111
</div>
<div class="test">
    222
</div>
<div class="test">
    333
</div>
<div class="test">
    444
</div>

<script>
    var per = document.getElementsByClassName("test");
    var i;
    for(i=0; i<per.length; i++){
        per[i].onclick = function(){
            alert(i);
        };
    }
</script>

EmperioAf · #2 (**permalink**) 03.08.2015, 21:48

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>ГГ</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
*{
    margin:0;
    padding:0;
    outline: 0;
}

.test {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 1px solid black;
}
</style>
</head>
<body>
    <div class="test">
    111
</div>
<div class="test">
    222
</div>
<div class="test">
    333
</div>
<div class="test">
    444
</div>

<script>
var per = document.getElementsByClassName("test");
    for(var i=0; i<per.length; i++){
        (function(n){
        per[n].onclick = function(){
            alert(n+1);
        }
        }(i));
    }
</script>
</body>
</html>

qwe88 · #3 (**permalink**) 03.08.2015, 22:05

Здорово!
Буду переваривать, спасибо!

Zagin · #4 (**permalink**) 02.11.2016, 11:28

Приветствую всех!
У меня - сходная проблема с замыканиями. Вроде и начал прозревать кое что об их необходимости в JS, но всё равно пока не всё получается. Вот в моём случае необходимо, чтобы при клике на ячейке таблицы (фактически - на DIV'е) рядом с некоторым смещением показывалась таблица с цветовыми кодами. Функцию смещения я подсмотрел в Тырнете, на конкретном ОТДЕЛЬНОМ элементе работает нормально. А вот подключить её в цикле сразу на все DIV'ы определённого класса - не получается: не могу передать в неё параметр (конкретный текущий DIV).

Подскажите, пожалуйста, как правильно сделать.
Прилагаю HTML+JS файлы в архиве.

Zagin · #5 (**permalink**) 03.11.2016, 09:34

Может, кому пригодится - ответ таки найден. Получен на другом форуме.

Форум

Справочник

Discord чат

Курсы javascript