Обработка кликов по изображениям в JavaScript

Оффтоп javascript
1

Привет всем! У меня возникла проблема при создании страницы с множеством картинок. Я хочу сделать так, чтобы пользователь мог выбирать картинки, и при этом добавить визуальные эффекты при наведении и клике.

Я использую JavaScript для изменения стилей div’ов при событиях onclick, onmouseover и onmouseout. Чтобы рамка кликнутой картинки не менялась при уходе мыши, я ввел переменную ‘imgClicked’. Но проблема в том, что эта переменная меняется для всех картинок сразу.

Как можно сделать так, чтобы каждая картинка знала, была ли она кликнута? Может, есть лучший способ решить эту задачу?

Вот пример кода, который я использую:

let выбрано = false;

function обработатьКлик(id) {
  const картинка = document.getElementById(id);
  if (!выбрано) {
    картинка.style.border = '3px solid red';
    выбрано = true;
  } else {
    картинка.style.border = '1px solid black';
    выбрано = false;
  }
}

function приНаведении(id) {
  if (!выбрано) {
    document.getElementById(id).style.border = '2px solid green';
  }
}

function приУходе(id) {
  if (!выбрано) {
    document.getElementById(id).style.border = '1px solid black';
  }
}

Буду благодарен за любую помощь!

2

Можно еще попробовать использовать классы вместо прямого изменения стилей. Типа так:

function обработатьКлик(id) {
  const картинка = document.getElementById(id);
  картинка.classList.toggle('выбрана');
}

А в CSS определить стили для обычного состояния, при наведении и для выбранных картинок. Так код будет чище и проще поддерживать. Что думаешь насчет такого подхода?

3

привет! я сталкивался с похожей задачей. вместо глобальной переменной выбрано, попробуй использовать атрибут data- для каждой картинки. например:

function обработатьКлик(id) {
  const картинка = document.getElementById(id);
  if (картинка.dataset.selected !== 'true') {
    картинка.style.border = '3px solid red';
    картинка.dataset.selected = 'true';
  } else {
    картинка.style.border = '1px solid black';
    картинка.dataset.selected = 'false';
  }
}

так каждая картинка будет хранить свое собственное состяние. в функциях приНаведении и приУходе тоже проверяй этот атрибут. это простое и эффективное решение, которое должно сработать!