Как выделить div нажатием лкм

Question

Вывожу список div блоков, как по нажатию лкм по блоку, изменить цвет заднего фона выбранного блока и в div сlacc="list-box" в параметр data записать значение из value class="list-item"

<div class="list-box" id="tileList" style="overflow: scroll; height: 100px;">
                    <?php foreach ($tileList as $val): ?>
                        <div class="list-item" value="<?php echo $val['id']; ?>">
                            <img id="source" src="public/images/tiles/<?php echo $val['file']; ?>" width="80" height="80">
                            <span><?php echo $val['title']; ?></span>
                            <span><?php echo $val['width']; ?>x<?php echo $val['height']; ?></span>
                        </div>
                    <?php endforeach; ?>
                </div>

Answer 1

Проверить с PHP нет возможности, но думаю, что логика верная:

document.querySelector('.list-box').addEventListener('click', function(ev) {
  let oTarget = ev.target.closest('.list-item');
  this.setAttribute('data', oTarget.getAttribute('value'));
  oTarget.style.backgroundColor = '#fa0';
});

<div class="list-box" id="tileList" style="overflow: scroll; height: 100px;">
  <?php foreach ($tileList as $val): ?>
  <div class="list-item" value="<?php echo $val['id']; ?>">
    <img id="source" src="public/images/tiles/<?php echo $val['file']; ?>" width="80" height="80">
    <span><?php echo $val['title']; ?></span>
    <span><?php echo $val['width']; ?>x<?php echo $val['height']; ?></span>
  </div>
  <?php endforeach; ?>
</div>

С переключением... :

document.querySelector('.list-box').addEventListener('click', function(ev) {
  let oTarget = ev.target.closest('.list-item');
  this.setAttribute('data', oTarget.getAttribute('value'));
  [...this.querySelectorAll('.list-item')].forEach(function(el) {
    el.style.backgroundColor = '';
  });
  oTarget.style.backgroundColor = '#fa0';
});

<div class="list-box" id="tileList" style="overflow: scroll; height: 100px;">
  <?php foreach ($tileList as $val): ?>
  <div class="list-item" value="<?php echo $val['id']; ?>">
    <img id="source" src="public/images/tiles/<?php echo $val['file']; ?>" width="80" height="80">
    <span><?php echo $val['title']; ?></span>
    <span><?php echo $val['width']; ?>x<?php echo $val['height']; ?></span>
  </div>
  <?php endforeach; ?>
</div>

Answer 2

Раз в тегах указан jquery то вот вариант на нём.

Я изменил атрибут value, на data-value.
А так же добавляется "активный" класс, в отличии от другого ответа, где вешается фон блока.

$('.list-box').on('click', '.list-item', function(){
  if(!$(this).hasClass('--selected')) {
    $(this).closest('.list-box').find('.list-item.--selected').removeClass('--selected');
    $(this).addClass('--selected');
    console.log($(this).attr('data-value'));
  }
});

.list-box {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 50px;
}

.list-box > div {
  display: block;
  width: 50px;
  height: 50px;
  margin-right: 5px;
  background: gray;
  cursor: pointer;
}

.list-box > div.--selected {
  border: 2px solid blue;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="list-box" id="tileList">
  <div class="list-item" data-value="1"></div>
  <div class="list-item" data-value="2"></div>
  <div class="list-item" data-value="3"></div>
  <div class="list-item" data-value="4"></div>
  <div class="list-item" data-value="5"></div>
</div>

БЛОГ НА HUSL

Как выделить div нажатием лкм

Ответы (2 шт):