Показать сообщение отдельно
  #1 (permalink)  
Старый 22.07.2024, 12:53
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 668

Слишком длинный код
Как его можно сократить ?

// Получаем элементы по их ID
const item1 = document.getElementById("item-1");
const item2 = document.getElementById("item-2");
const item3 = document.getElementById("item-3");
const item4 = document.getElementById("item-4");
const item5 = document.getElementById("item-5");
const item6 = document.getElementById("item-6");
const item7 = document.getElementById("item-7");
const item8 = document.getElementById("item-8");
const item9 = document.getElementById("item-9");
const setPic = document.querySelector(".set_pic");



// Добавляем обработчик события наведения на элемент item-1
item1.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-1.png)";
});
// Добавляем обработчик события ухода с элемента item-1
item1.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-1.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-2
item2.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-2.png)";
});
// Добавляем обработчик события ухода с элемента item-2
item2.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-2.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-3
item3.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-3.png)";
});
// Добавляем обработчик события ухода с элемента item-3
item3.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-3.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-4
item4.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-4.png)";
});
// Добавляем обработчик события ухода с элемента item-4
item4.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-4.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-5
item5.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-5.png)";
});
// Добавляем обработчик события ухода с элемента item-5
item5.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-5.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-6
item6.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-6.png)";
});
// Добавляем обработчик события ухода с элемента item-6
item6.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-6.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-7
item7.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-7.png)";
});
// Добавляем обработчик события ухода с элемента item-7
item7.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-7.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-8
item8.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-8.png)";
});
// Добавляем обработчик события ухода с элемента item-8
item8.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-8.png)") {
    setPic.style.backgroundImage = "";
  }
});

// Добавляем обработчик события наведения на элемент item-9
item9.addEventListener("mouseenter", () => {
  // Устанавливаем фоновое изображение для элемента setPic
  setPic.style.backgroundImage = "url(../picture/box_game-0.png)";
});
// Добавляем обработчик события ухода с элемента item-9
item9.addEventListener("mouseleave", () => {
  // Возвращаем исходное фоновое изображение, если оно было установлено
  if (setPic.style.backgroundImage === "url(../picture/box_game-0.png)") {
    setPic.style.backgroundImage = "";
  }
});
Ответить с цитированием