При клике на опред. юзера всплывает его информация

[yaparoff]

Выводиться список пользователей с помощью ajax.
Нужно сделать, чтобы при клике на пользователя выводилось окно с доп. информацией этого пользователя.

Это окно уже выведено, но оно спрятано с помощью css. Просто при клике на юзера я буду добавлять ему класс, чтобы оно было видно.

Но как сделать чтобы при клике на опред. юзера открывалась именно его доп. информация?

получается перебираем сначала всех пользователей:
var user = document.querySelectorAll('.user');

это вроде массив должен получиться, и как из него достать юзера на который кликнули?

http://codepen.io/anon/pen/

[рони]

yaparoff, делегирование!

usersList.addEventListener("click", function(event) {
    var target = event.target;
    while (target != usersList) {
        if (target.classList.contains("user")) {
            target.querySelector(".user__info").classList.toggle("visible");
            break
        }
        target = target.parentNode
    }
});

css только для примера

.user__info.visible {
  visibility: visible;
  left: 0;
 }

[yaparoff]

yaparoff, делегирование!

рони, спасибо большое! Вы меня очень выручили!

скажите, а для чего нужен break здесь? вроде бы и без него работает

[рони]

yaparoff,
зачем продолжать цикл если нашли искомое, да будет работать и без него, но дольше на одну миллиардную долю секунды.

[yaparoff]

yaparoff, делегирование!

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

Т.е. когда окно всплыло, как сделать чтобы при клике на него - оно не исчезало?

http://codepen.io/anon/pen/

[рони]

yaparoff,

usersList.addEventListener("click", function(event) {
    var target = event.target,
        close = target.classList.contains("user__close");
    while (target != usersList) {
        if (target.classList.contains("user__content") && !close) break;
        if (target.classList.contains("user")) {
            target.querySelector(".user__info").classList.toggle("visible");
            break
        }
        target = target.parentNode
    }
});