Как сделать событие click на всех элементах коллекции?

Question

[Arbitr]

Имеется блок, в нем треугольник(div), при нажатии на которого выходит меню с действиями, через базу данных выводится n-ое кол-во блоков, как заставить событие click срабатывать и вызывать меню у каждого элемента при клике на треугольник.

<figure class="block">
        <p>Действия
          <div class="block3">
            <div class="window">
            <ul>
              <li>Скачать</li>
              <li>Открыть в новой вкладке</li>
              <li>Описание</li>
            </ul>
            </div>
          </div>
        </p>
        <img src="/var/www/html/data/img/2.jpg" alt="">
        <figcaption>текстура голубого цвета</figcaption>
      </figure>

вот стили:

.block{
    width: 200px;
    height: 200px;
    min-height: 200px;
    background: #102C3D;
    display: inline-block;
    color: #E86023;
    position: relative; 
    margin: 10px 0 0 10px
}
.block3{
    vertical-align: middle;
    width: 0;
    height: 0;
    border-top: solid #E86023 10px;
    border-left: solid transparent 5px;
    border-right: solid transparent 5px;
    display: inline-block;
    margin: 0 0 0 4px;
    cursor: pointer;
}
.windows{
    position: relative;
    margin: 2px 0 0 -100px;
    border: solid black 2px;
    width: 210px;
    cursor: default;
    z-index: 100;
    background-color: #102C3D;
    opacity:0;
    visibility: hidden
}
.doneWindow{
    opacity:1;
    visibility: visible;
}

поведение:

block3.onclick = function () {
		if (!windows.classList.contains('doneWindows')) {
			windows.classList.add('doneWindows');
		}
		else{
			windows.classList.remove('doneWindows');
		}
	}

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

Comments

[Андрей]

вызвать меню у каждого блока?

[Андрей]

Arbitr

block3.onclick = function () {
var blocks = document.getElementsByclassName("block");
for (i = 0; i < blocks.length; i++) {
if (!blocks[i].classList.contains('doneWindows')) {
blocks[i].classList.add('doneWindows');
}
else{
blocks[i].classList.remove('doneWindows');
}
}

}

[Kovalsky]

То есть вы таким образом делегируете клик с элементов .block3 li на элемент .block3? И что значит "применять событие"?...

Кстати, элемент P не может содержать блочных элементов, как DIV.

[Arbitr]

Андрей: но getElementsByclassName возвращает коллекцию элементов, работать будет на всех?

[Arbitr]

Андрей: все разобрался, спасибо!

Answer 1

[Exploding]

Особо не разбирался где там у Вас что, поэтому селекторы поправите сами. Вот:
#context-menu - один единственный блок меню на всё
.block3 - туча блоков по которым кликают

$("body").on("click", ".block3", function(event){
	$("#context-menu").show()
		.css({
			display: "block",
			position: "absolute"
		})
		.offset({left: event.pageX, top: event.pageY});
	event.stopPropagation();
}

Answer 2

[Alexander Kramov]

Я ничего не понял, но мне кажется, что перехватывать событие в вашем случае надо выше в иерархии.

Comments

[Kovalsky]

+1 к "я ничего не понял"