你選中那一個？

你選中那一個？

下列有許多圖片，都是小圖片。你可以任選一個，click一下，那張就會變大。其他消失。再click一下那張大照片，就會恢復原狀。

這是要使用 javascript 來找出你按下去的是那一張，再對那一張進行 class 的變動。

所以，如何選取就是思考上的重中之重。

在這裡，文科生，我們要會使用 css 選取器，你才不會要用到奇怪的計算方法。

1. 要把 flex 裡面的 div 都選出來。 document.querySelectorAll(".flexcontainer >div");
2. 每個 div 都要被賦予可以 click 的功能，所以要會遍歷功能， forEach。以及 div 有監聽的功能，addEventListener("click", (event) => {}); ，即有 click 的動作後，就可以去做什麼事。
3. 我們用 classList.toggle() 的功能，把 class 的許多屬性加到 div 裡面去，這是文科生最好用的方法，直觀的用就可以。

語法：

<style type="text/css">.flexcontainer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flexcontainer >div {
width: 24%;
margin-bottom: 5px;
}
.flexcontainer >div >img {
width: 100%;
}
.displaynodiv {

display: none !important;
}
.largeDiv {
display: block !important;
width: 100% !important;
transition: 1s all;
}
</style>
<div class="flexcontainer">
<div><img src="https://images.pexels.com/photos/38146388/pexels-photo-38146388.jpeg" /></div>

<div><img src="https://images.pexels.com/photos/38146387/pexels-photo-38146387.jpeg" /></div>

<div><img src="https://images.pexels.com/photos/38146357/pexels-photo-38146357.jpeg" /></div>

<div><img src="https://images.pexels.com/photos/38146336/pexels-photo-38146336.jpeg" /></div>

<div><img src="https://images.pexels.com/photos/38146330/pexels-photo-38146330.jpeg" /></div>
</div>
<script>
const allDivcontainer = document.querySelectorAll(".flexcontainer >div");
allDivcontainer.forEach(element =>{
element.addEventListener("click", (evnet) =>{
allDivcontainer.forEach(element =>{
element.classList.toggle("displaynodiv");

});
event.currentTarget.classList.toggle("largeDiv");
});

});
</script>