当鼠标单击时更改 div 的样式，再次单击时将其更改回来。

Question

我已经准备好了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>

在jsFiddle上查看

- LDropl

---

在文档中，ID必须是唯一的。您有多次出现的id="child1"和id="child2"。 - Gerard

Answer 1

您可以添加CSS类，然后使用.toggle()来开/关所选元素的类，要从组元素中移除类并排除当前点击的项目，您可以使用.not()和.remove()：

$(this).parent().find('.childDiv').not(this).removeClass('selected');

这是一个工作的代码片段或样例：

$('.childDiv').click(function(){
  $(this).parent().find('.childDiv').not(this).removeClass('selected');
  $(this).toggleClass('selected');
});

.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
  margin:5px;  
    display:relative;
}


.childDiv{
  border:1px solid blue;
 height: 50px;   
    margin:10px;
}

.selected {
  background-color: #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

如果您想取消选择页面上的所有元素，只需删除.parent().find()，它就适用于所有元素：

$('.childDiv').click(function(){
  $('.childDiv').not(this).removeClass('selected');
  $(this).toggleClass('selected');
});

.parentDiv{
 border:1px solid black;
 padding:10px;
 width: 80px; 
  margin:5px;  
    display:relative;
}


.childDiv{
  border:1px solid blue;
 height: 50px;   
    margin:10px;
}

.selected {
  background-color: #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

- ROOT

---

该功能与我在原始帖子中已实现的功能不兼容。 - LDropl

@LDropl，我使用jQuery进行了处理，我认为您希望取消选择功能仅适用于同一组，而不是整个“childDiv”，您能否再详细解释一下？ - ROOT