Измените стиль div щелчком мыши и вторым щелчком измените его обратно

Question

Я подготовил jsFiddle , где я хочу изменить фон div «Child X» щелчком мыши, и если он был снова нажат на уже выбранном div, затем измените стиль обратно на исходный.

Прямо сейчас есть ошибка, когда страница только что загружена, при самом первом щелчке по дочернему div ничего не происходит, только если я щелкну второй раз, цвет будет быть изменен. Почему?

PS Остальные функции должны оставаться неизменными, например, при нажатии на другой 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

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>