我已经准备好了jsFiddle,我想通过鼠标单击来更改“Child X” div的背景,并且如果再次单击已经选定的div,则将样式更改回原始状态。
现在,在页面刚加载时存在一个错误,第一次点击子div时什么也不会发生,只有当我第二次点击时颜色才会改变。为什么?
P.S. 其他功能应保持不变,比如点击不同的div,以前选择的div应该取消选择。
$(".childDiv").click(function () {
const x = document.getElementsByClassName("childDiv");
for (let i = 0; i < x.length; i++) {
x[i].addEventListener("click", function(){
const selectedEl = document.querySelector(".childDivSelected");
if(selectedEl){
selectedEl.classList.remove("childDivSelected");
}
this.classList.add("childDivSelected");
}, false);
}
})
.parentDiv{
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.childDiv{
border:1px solid blue;
height: 50px;
margin:10px;
}
.childDivSelected{
background-color: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<div id="divParent1" class="parentDiv">
Group 1
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
<div id="divParent2" class="parentDiv">
Group 2
<div id="child1" class="childDiv">
Child 1
</div>
<div id="child2" class="childDiv">
Child 2
</div>
</div>
id="child1"
和id="child2"
。 - Gerard