Как его можно сократить ?
// Получаем элементы по их 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 = "";
}
});
