Question

当我单击“此”元素时，我正在调整这些面板的大小以适合屏幕高度。我觉得我对这些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>

我希望简化的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

您可以将它们全部标记为无效，然后将当前标记重新标记为有效。

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

您还可以从数组中过滤出this，但不会改变结果。

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

这有点棘手，但是这里是：（8行）

intlinprog

有没有更好的方法来执行此js代码？

4 个答案: