@LoranDeMarcus

Как выбрать дочерние элементы другого родителя?

Есть такая структура HTML. Ее менять нельзя.
Как сделать, чтобы при нажатии на блок, менялся цвет только выбранного блока, его текст и текст под блоком.
При нажатии на текст под блоком, текст и блок тоже меняются.
И при нажатии на блок повторно, он восстанавливался в первоначальное состояние.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="block">
    <div>
      <p class="text">
        some text for block 1
      </p>
    </div>
    <div>
      <img src="https://picsum.photos/id/223/200/150" alt="">
    </div>
  </div>
  <div>
    <p class="under-box-text">
      Under box <a class="link">click here</a>
    </p>
    <p class="invisible">
      Done!
    </p>
  </div>
</div>
<div class="wrapper">
  <div class="block">
    <div>
      <p class="text">
        some text for block 2
      </p>
    </div>
    <div>
      <img src="https://picsum.photos/id/222/200/150" alt="">
    </div>
  </div>
  <div>
    <p class="under-box-text">
      Under box <a class="link">click here</a>
    </p>
    <p class="invisible">
      Done!
    </p>
  </div>
</div>


.block {
  background: #444;
  width: 150px;
  height: 200px;
  display: inline-block;
  text-align: center;
  border: 1px solid aqua;
  cursor: pointer;

}

img {
  width: 150px;
}

.text {
  color: white;
}

.link {
  text-decoration: underline;
  cursor: pointer;
}

.invisible {
  display: none;
}


$(document).ready(function () {

	$(".block").click(function() {
  	$(this).css("border", "1px solid red");
    $(this).find(".text").css("color", "red");
  	$(this).parents().find(".under-box-text").css("display", "none");
    $(this).parents().find(".invisible").css("display", "block");
  });
  
  $(".link").click(function () {
  	$(this).parent().css("display", "none");
    $(this).parents().find(".invisible").css("display", "block");
    $(this).parents().find(".block").css("border", "1px solid red");
  });
  
});
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега CSS
.active .block {
  border: 1px solid red;
  color: red;
}

.active .under-box-text {
  display: none;
}

.active .invisible {
  display: block;
}

$('.block, .link').click(function() {
  $(this).closest('.wrapper').toggleClass('active');
});
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы