0

Как сделать чтобы выбор элемента block был только среди элементов внутри родителя box, а не среди всех элементов box на странице?

jQuery('.block').click(function(e) {
    jQuery(this).addClass('active');
    jQuery('.block').not(this).removeClass('active');
});
.box{
  display: flex;
  margin-bottom: 50px;
}

.block{
  cursor: pointer;
  width: 100px;
  height: 100px;
  display: block;
  border: 1px solid blue;
  margin: 0 10px;
}

.block.active{
  background-color: blue;
}
<div class="box">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

<div class="box">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1

1 ответ 1

0

Используйте метод siblings() для поиска сестринских элементов (документация):

jQuery('.block').click(function(e) {
    jQuery(this).siblings('.block').removeClass('active');
    jQuery(this).addClass('active');
});
.box{
  display: flex;
  margin-bottom: 50px;
}

.block{
  cursor: pointer;
  width: 100px;
  height: 100px;
  display: block;
  border: 1px solid blue;
  margin: 0 10px;
}

.block.active{
  background-color: blue;
}
<div class="box">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

<div class="box">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.