0

var wrappers = document.querySelectorAll('.wrapper');
var closse = document.querySelectorAll('.rec');
for (var i = 0; i<wrappers.length; i++) {
	wrappers[i].onclick = function() {
  	this.firstElementChild.style.display = 'block';
    rec[i].onclick = function() {
    	
    }
  };
};
.wrapper {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  display: inline-block;
  cursor:pointer;
  margin: 10px;
  position: relative;
}

.some {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.2);
}

.rec {
  width: 20px;
  height: 3px;
  background-color: black;
  position: absolute;
  right: 4px;
  top: 10px;
}
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>

Существует 4 div'a при нажатии на которые они затемняются и на них появляется черточка, как сделать так, что бы при нажатии на черточку затемнение пропадало?

1

2 ответа 2

2

var wrappers = document.querySelectorAll('.wrapper');
for (var wrap of wrappers) {
  wrap.onclick = function() {
    this.firstElementChild.style.display = 'block';
  };

  wrap.querySelector(".rec").onclick = function() {
    event.stopImmediatePropagation();
    this.closest(".some").style.display = "none";
  };
}
.wrapper {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  display: inline-block;
  cursor: pointer;
  margin: 10px;
  position: relative;
}

.some {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

.rec {
  width: 20px;
  height: 3px;
  background-color: black;
  position: absolute;
  right: 4px;
  top: 10px;
}
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>

4
  • не работает, какая-то ошибка.
    – uzi_no_uzi
    1 янв 2018 в 17:31
  • 1
    @uzi_no_uzi какая какая-то?
    – andreymal
    1 янв 2018 в 18:07
  • @andreymal prntscr.com/huu1al
    – uzi_no_uzi
    1 янв 2018 в 18:15
  • @uzi_no_uzi у меня работает, можно попробовать ещё вот так написать - wrap.querySelector(".rec").onclick = function(event) 1 янв 2018 в 18:35
0

Самый банальный способ

var wrappers = document.querySelectorAll('.wrapper');
var closse = document.querySelectorAll('.rec');
for (var i = 0; i<wrappers.length; i++) {
	wrappers[i].onclick = function() {
    if (this.firstElementChild.style.display == 'block')
  	  this.firstElementChild.style.display = 'none'
    else
      this.firstElementChild.style.display = 'block'

  };
};
.wrapper {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  display: inline-block;
  cursor:pointer;
  margin: 10px;
  position: relative;
}

.some {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,0.2);
}

.rec {
  width: 20px;
  height: 3px;
  background-color: black;
  position: absolute;
  right: 4px;
  top: 10px;
}
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>
<div class="wrapper">
  <div class="some">
    <div class="rec"></div>
  </div>
</div>

1
  • Данный способ работает при клике на все окно, а надо что бы работало при клике на крестик. Но проблему я уже решил.
    – uzi_no_uzi
    3 янв 2018 в 22:09

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.