Как сделать проще. компактней код?

Question

[Евгений Block]

const itemClicl = document.querySelector('.hiking__about_item_img');
const img1Element = document.querySelector('.img1');
const img2Element = document.querySelector('.img2');

 itemClicl.onclick = imgToogle; 

 function imgToogle () {
   const img1 = img1Element.getAttribute('src') === 'img/about_hiking/1.png';
   const img2 = img2Element.getAttribute('src') === 'img/about_hiking/2.png';

  
    if(img1) {
        img1Element.src = 'img/about_hiking/2.png';
        img1Element.setAttribute("alt", 'snowy mountains');
    } else {
        img1Element.src = 'img/about_hiking/1.png';
    }   img1Element.setAttribute("alt", 'house and mountains in the background') 
    if (img2) {
        img2Element.src = 'img/about_hiking/1.png';
        img1Element.setAttribute("alt", 'snowy mountains'); 
    } else {
        img2Element.src = 'img/about_hiking/2.png';
        img1Element.setAttribute("alt", 'house and mountains in the background'); 
        
    }

Answer 1

[Михаил Р.]

Попроще, как заказывали!

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);
});

Comments

[MVV]

Что, 20 непустых строк вместо 19 - это теперь называется "попроще"?
PS. В решение так и просятся шаблонные строки (а то и шаблонные функции). Но JS - это не мой язык, потому так сразу не напишу

[YAHEFID]

MVV, диванный критик, напиши свое решение, а после умничай тут.

[Сергей delphinpro]

Конфиг стоит изменить на примерно такой

const i1 = document.querySelector('.img1');
const i2 = document.querySelector('.img2');
const imageConfigurations = {
  images     : [i1, i2],
  sourcePaths: [i1.getAttribute('src'), i2.getAttribute('src')],
  altTexts   : [i1.getAttribute('alt'), i2.getAttribute('alt')]
}

Ну и далее по коду логику соответственно обновить..

[Tim]

если так важно кол-во строк, то примерно

const itemClicl = document.querySelector('.hiking__about_item_img');

itemClicl.onclick = imgToogle;

function imgToogle() {

    for (let i = 1; i < 3; i++) {
        const img = document.querySelector('.img' + i)?.src === `img/about_hiking/${i}.png`;
        img.src = img ? `img/about_hiking/${i === 1 ? 2 : 1}.png` : `img/about_hiking/${i === 1 ? 1 : 2}.png`;
        img.setAttribute("alt", img ? 'snowy mountains' : 'house and mountains in the background');
    }
}

Answer 2

[Сергей delphinpro]

<div class="hiking__about_item_img">
  <img class="img1" src="img/about_hiking/1.png" alt="House and mountains in the background">
  <img class="img2" src="img/about_hiking/2.png" alt="Snowy mountains">
</div>

.hiking__about_item_img:not(.toggled) .img2,
.hiking__about_item_img.toggled .img1 {
    display: none;
}

document.querySelector('.hiking__about_item_img')?.addEventListener('click', e => {
    e.currentTarget.classList.toggle('toggled');
});