Изолировать click. Закрывать соседние плашки.

[npofopr]

как изолировать клик по 'button' и клик по 'cardBack'. Там получается, что клик по кнопке срабатывает также как клик по всей области. Читаю про 'e.preventDefault();' но пока не вник, куда его вставить.
И как можно закрывать соседние плашки, когда на другую кликаю?

https://codepen.io/npofopr/pen/zYOmbPv

Видео не стопорится я понимаю почему, потому что первый элемент video и так не проигрывается. По всем тегам, я так понимаю, надо через `querySelectorAll` проходить?

Изолировал 

e.stopPropagation();

 

[Switch74]

может подойдет что-то вроде?
https://jsfiddle.net/9k4mpovh/

[npofopr]

По изоляции да, подойдёт. 
Изоляцию я уже починил в примере. 

Теперь читаю/ разбираюсь как соседние элементы закрывать.

Но от помощи не отказываюсь 😄 

[Switch74]

если я правильно понял, вы хотите чтобы при клике по одной из картинок, открытое видео закрылось
я так понимаю можно удалить класс у элемента is-flipped на вроде $('.is-flipped').removeClass('is-flipped')

[npofopr]

Примерно так, да. 

Там при нажатии добавляется класс .is-flipped , и внутри получается есть ещё кнопка, которая меняет видео. 
Ну и да, при нажатии на соседнюю плитку, класс надо у соседней удалять. И видео стопорить. 

Попробую) 

Попробую на Jq переписать, что есть. Как то мне попроще пока будет. 

[Switch74]

без jq можно через
 

var list = document.querySelectorAll('.is-flipped')
list.forEach(function(item) {
  item.classList.remove('is-flipped');
});

 

[npofopr]

Обновил https://codepen.io/npofopr/pen/zYOmbPv 🙂 

Вроде даже и с видео разобрался. Воткнул правда две кнопки, одной кнопкой как сменять видео, пока не допёр. 

Осталось понять, как активную карточку закрывать по правильному, при клике на неё)

Пробовал вместо while (target != this) сделать через for, но кроме ошибки это ничего не дало. 

[Switch74]

а при клике по "лего игрульке" почему у вас она же снова открывается?
я так понимаю у вас обработка клика на открытие и закрытие на одном объекте, тогда наверно нужно проверять наличие класса is-flipped, или реализовать клик по элементу с ним удаляя его.

[npofopr]

Да. Совершенно верно. Знать бы ещё как) 

По идее ваш вариант должен срабатывать,

var list = document.querySelectorAll('.is-flipped')
list.forEach(function(item) {
  item.classList.remove('is-flipped');
});

но он не обрабатывает этот клик. 

 

Или по идее, я могу накостылять клик на блок с видео, и у родителя удалять класс is-flipped. Правда тоже не факт, что сработает. 

[Switch74]

  cardWrap.onclick = function(event) {
    let target = event.target;
    while (target != this) {
      if (target.classList.contains("flip-card")) {
        if(target.classList.contains("is-flipped")) target.classList.remove('is-flipped');
        else highlight(target);
        return;
      }
      target = target.parentNode;
    }
  };

так?

[npofopr]

Да! Спасибо! 

А почему так не срабатывает? 

cardWrap.onclick = function(event) {
    let target = event.target;
    while (target != this) {
      if (target.classList.contains("flip-card")) {
        if (target.classList.contains("is-flipped"))
          target.classList.remove("is-flipped");
          target.querySelector(".friends-video").classList.remove("is-back");
          target.querySelector(".friends-video__back > video").load();
          target.querySelector(".friends-video__front > video").load();
        else highlight(target);
        return;
      }
      target = target.parentNode;
    }
  };

Удалять класс он удаляет, а дальше 

target.querySelector(".friends-video").classList.remove("is-back");
target.querySelector(".friends-video__back > video").load();
target.querySelector(".friends-video__front > video").load();

уже нельзя получается?

А нет. Добавил скобочки { } и теперь вроде всё как надо, надеюсь.

if (target.classList.contains("is-flipped")) {
  target.classList.remove("is-flipped");
  target.querySelector(".friends-video").classList.remove("is-back");
  target.querySelector(".friends-video__back > video").load();
  target.querySelector(".friends-video__front > video").load();
} else { highlight(target); }
return;

https://codepen.io/npofopr/pen/zYOmbPv