Есть ли лучший способ сделать этот код JS?

Question

Я делаю размеры этих панелей, чтобы они соответствовали высоте экрана, когда я нажимаю элемент «this».Я чувствую, что жестко закодировал эти javascript и считаю, что должен быть лучший способ.Но не могу разобраться.

когда нажата одна панель, ее размер станет больше, а остальные панели уменьшатся

Я был бы очень признателен за любое предложениеэто.

Я пытался сделать эту функцию многоразовой, но потом не смог придумать лучшего решения, так как я начинающий.

const panels = document.querySelectorAll('.panel');
        const panelsArr = Array.from(panels);

        panelsArr.forEach(panel => panel.addEventListener('click',getCurrentName))

        function getCurrentName(element) { 
            const panel1 = document.querySelector('.panel1');
            const panel2 = document.querySelector('.panel2');
            const panel3 = document.querySelector('.panel3');
            const panel4 = document.querySelector('.panel4');

            console.log(this);
            if(this) {

                this.classList.toggle('active');

                if(this === panel1) {

                panel2.classList.toggle('inactive');
                panel3.classList.toggle('inactive');
                panel4.classList.toggle('inactive');    
                } else if (this === panel2) {
                panel1.classList.toggle('inactive');
                panel3.classList.toggle('inactive');
                panel4.classList.toggle('inactive'); 

                } else if (this === panel3) {
                panel1.classList.toggle('inactive');
                panel2.classList.toggle('inactive');
                panel4.classList.toggle('inactive'); 

                } else if (this === panel4) {
                panel1.classList.toggle('inactive');
                panel2.classList.toggle('inactive');
                panel3.classList.toggle('inactive'); 
                }

            }

        }

.panel {
    background-color: #002712;
    box-shadow: inset 0 0 0 .5rem rgba(255,255,255,0.1);
    min-height: 22.5vh; 
    color: #fff;
    text-align: center;
    font-size: 2rem;
    background-size: cover;
    background-position: center;
    line-height: 8rem;
    transition: 
    min-height .5s linear,
    font-size .2s linear .5s,
    line-height .2s linear .5s;
}

.panel1 { background-image: url("../images/steake.png"); }
.panel2 { background-image: url("../images/sundayRoast.png"); }
.panel3 { background-image: url("../images/image1(1).png"); }
.panel4 { background-image: url("../images/cannonbury.png"); }

.active { 
    min-height: 37vh;
    line-height: 15rem;
    font-size: 2.3rem;
}

.inactive { 
    min-height: 15vh; 
    font-size: 1.2rem;
}

<main>
            <section class="intro">
                <div class="intro-panels">
                    <section class="panel panel1">
                        <p>most original,</p>
                    </section>
                    <section class="panel panel2">
                        <p>best beer,</p>
                    </section>
                    <section class="panel panel3">
                        <p>grilled food</p>
                    </section>
                    <section class="panel panel4">
                        <p>Islington</p>
                    </section>
                </div>
            </section>
        </main>

Iожидайте, что упрощенный код javascript для достижения той же цели.

Вот как я разобрался с вашим ответом.Спасибо за вашу помощь, ребята.

const panels = document.querySelectorAll('.panel');
        const panelsArr = Array.from(panels);

        panelsArr.forEach(panel => panel.addEventListener('click', getCurrentName))

        function getCurrentName(element) {
            if(this) {

                panelsArr.forEach(panel => panel.classList.toggle('inactive'));

                this.classList.toggle('inactive');
                this.classList.toggle('active');
            }

        }

Answer 1

было немного сложно, но вот оно: (8 строк)

const panels = document.querySelectorAll('.panel');

document.querySelector('.intro-panels').onclick = e =>{
  let sct = e.target.closest('section');

  if (!sct || !sct.classList.contains('panel') ) return;
  e.stopPropagation();

  let refPanel = /panel[1-4]/.exec(sct.className)[0];

  panels.forEach(p=>{
    if (p.classList.contains(refPanel))  { p.classList.toggle('active')   }
    else                                 { p.classList.toggle('inactive') }
  })
}

Answer 2

Вы можете переключать класс inactive для всех элементов класса, но снова отменять его для целевого элемента:

    const panels = document.querySelectorAll('.panel');
    const panelsArr = Array.from(panels);

    panelsArr.forEach(panel => panel.addEventListener('click',getCurrentName))

    function getCurrentName(element) { 
        console.log(this);
        if(this) {

            // Toggle inactive on all elements
            for (i = 0; i < panels.length; ++i) {
              panels[i].classList.toggle('inactive');
            }

            //But undo for selected element again
            this.classList.toggle('inactive');
            this.classList.toggle('active');
        }

    }

Answer 3

Попробуйте что-нибудь подобное. Делегирование мероприятия

document.addEventListener('click', (e) => {

  if(e.target.matches('.sizable')) {
    document.querySelectorAll('.sizable').forEach(div => {
      div.classList.remove('active');
      div.classList.add('inactive');
    });
    e.target.classList.add('active');
  }

});

.sizable {
  display: inline-block;
  border: 1px solid black;
  margin: 5px;
}

.inactive {
  width: 50px;
  height: 50px;
}

.active {
  width: 150px;
  height: 150px;
}

<div class="sizable">Stuff</div>
<div class="sizable">Stuff</div>
<div class="sizable">Stuff</div>
<div class="sizable">Stuff</div>
<div class="sizable">Stuff</div>
<div class="sizable">Stuff</div>

Answer 4

Вы можете пометить их как неактивные и пометить текущий как активный.

Array.from(document.querySelectorAll('.panel')).forEach(element => {
  element.classList.remove('active');
  element.classList.add('inactive')
});
this.classList.remove('inactive');
this.classList.add('active');

Вы также можете отфильтровать this из массива, но это не изменит результат.