Как можно улучшить структуру и ясность кода для функции `imgToogle()`?
1. Использование функции `toggleClass()` вместо повторяющихся `if/else` операторов для добавления и удаления классов.
2. Использование параметров в функции `imgToggle()` для указания элементов и классов, что позволяет ее использовать с разными элементами на странице.
3. Использование комментариев для объяснения кода и его последовательности.
4. Удаление неиспользуемых комментариев и лишних пробелов для более чистого кода.
Пример упрощения и сокращения объема кода для функции `imgToggle()`:
```javascript
function imgToggle(img, class1, class2) {
img.classList.toggle(class1);
img.classList.toggle(class2);
}
// Использование imgToggle
imgToggle(document.getElementById("myImg"), "visible", "hidden");
```
Пример улучшенной структуры и ясности кода для функции `imgToggle()`:
```javascript
// Функция для переключения классов у изображения
function imgToggle(img, class1, class2) {
img.classList.toggle(class1); // Добавление/удаление первого класса
img.classList.toggle(class2); // Добавление/удаление второго класса
}
// Использование imgToggle для управления видимостью изображения
var myImg = document.getElementById("myImg"); // Получение элемента изображения
imgToggle(myImg, "visible", "hidden"); // Переключение классов
```
Использование параметров `img`, `class1` и `class2` позволяет функции `imgToggle` работать с различными элементами и классами на странице, делая ее более гибкой и повторно используемой. Комментарии добавлены для объяснения каждой части кода, что повышает ясность и понятность функции.
const clickTargetElement = document.querySelector('.hiking__about_item_img');
const imageConfigurations = {
primaryImage: {
htmlElement: document.querySelector('.img1'),
sourcePaths: ['img/about_hiking/1.png', 'img/about_hiking/2.png'],
altTexts: ['House and mountains in the background', 'Snowy mountains']
},
secondaryImage: {
htmlElement: document.querySelector('.img2'),
sourcePaths: ['img/about_hiking/1.png', 'img/about_hiking/2.png'],
altTexts: ['House and mountains in the background', 'Snowy mountains']
}
}
const toggleImageAttributes = ({ htmlElement, sourcePaths, altTexts }) => {
const isPrimarySource = htmlElement.getAttribute('src') === sourcePaths[0];
const indexToUse = isPrimarySource ? 1 : 0;
htmlElement.setAttribute('src', sourcePaths[indexToUse]);
htmlElement.setAttribute('alt', altTexts[indexToUse]);
}
clickTargetElement.addEventListener('click', () => {
Object.values(imageConfigurations).forEach(toggleImageAttributes);
});