就是不要那一個

先按下去看看吧!

第一個div

第二個div

第三個div

第四個div

**按下去的是第幾個div啊？

看到了嗎？

按下去那一個，和其他的顏色都不一樣。

文科生會說，啊，被排擠了。


語法：

<style>
#test0608 div {
border: 1px solid red;
margin-bottom: 5px;
font-size: 3em;
padding: 5px;
}
</style>

<div id="test0608">
<div>第一個div</div>
<div>第二個div </div>
<div>第三個div </div>
<div>第四個div</div>
</div>
<div id="test060802" style="font-size: 2em;">**按下去的是第幾個div啊？
</div>
<script>
const divElements = document.querySelectorAll("#test0608 div");
divElements.forEach(dive => {
dive.addEventListener("click", (event) => {
event.target.style = "color: red;";
let pattern = Array.from(divElements).indexOf(event.target);
let patternadd = pattern +1;
document.querySelector("#test060802").append(patternadd);
const elements = document.querySelectorAll(`#test0608 :not(:nth-of-type(${patternadd}))`);

elements.forEach(el => {
el.style = 'color: green';
});
});
});
</script>