0

Есть 3 блока. Как сделать чтобы при клике на каждый, открывался один и тот же блок. Чтобы разные блоки открывались - делал, с этим проблемы.

<div class="block" id="block">
 <div class="item">5</div>
 <div class="item">6</div>
 <div class="item">7</div>
</div>
<div class="info-block"></div>

при нажатии на один из блоков item, появляется блок info-block, а при нажатии на другой блок item, блок info-block появляется в том месте где только кликнули

1 ответ 1

0

Наверно вам нужно что-то около такого:

В этом примере главная фишка в рассчете координат мышки с помощью e.pageX, остальное - детали. Mousemove можете заменить на 'click';

const item = document.getElementsByClassName('item');
const info = document.getElementById('info-block');
for( let i = 0; i < item.length; i++ ){
  item[i].addEventListener('mousemove', function(e){
    info.style.left = (e.pageX + 10) + 'px';
    info.style.top = (e.pageY + 5) + 'px';
  });  
  
  //mousemove срабатывает при каждом сдвиге мышки. 
  //Поэтому здесь полезнее его использовать отдельно, лишь для рассчета координат. 
  //А остальные детали - при mouseenter, всего один раз, 
  //когда мышка заходит на "территорию" элемента.
  item[i].addEventListener('mouseenter', function(){
    info.style.display = "inline-block";
    info.innerText = 'Это ' + item[i].innerText + '!';
  });   
  
  item[i].addEventListener('mouseleave', function(){
    info.style.display = "none";
  });  
}
#info-block {
  position: absolute; 
  display: none;
  background-color: white; 
  border: 3px solid #f36700; 
  color: #f36700; 
  padding: 3px 15px;
}

.item {border: 1px solid #123; cursor: pointer; margin: 5px; height: 50px;}
<div id="info-block">Текст...</div>

<div class="item">bubu</div>
<div class="item">lulu</div>
<div class="item">какашка</div>

В зависимости от разметки и поставленной задачи, может и такой вариант пройти, через appendChild - каждый раз при клике брать элемент и переставлять куда надо:

const item = document.getElementsByClassName('item');
const info = document.getElementById('info-block');
for( let i = 0; i < item.length; i++ ){
  item[i].addEventListener('click', function(){
    this.appendChild(info);
  });  
}
#info-block {
  background-color: white; 
  border: 3px solid #f36700; 
  color: #f36700; 
  padding: 3px 15px;
}

.item {border: 1px solid #123; cursor: pointer; margin: 5px; height: 50px;}
<div class="item">bubu
  <div id="info-block">Текст...</div>
</div>
<div class="item">lulu</div>
<div class="item">какашка</div>

Ваш ответ

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

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