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

Question

[Im p3l]

Есть такая структура 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");
  });
  
});

Answer 1

[0xD34F]

.active .block {
  border: 1px solid red;
  color: red;
}

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

.active .invisible {
  display: block;
}

const itemSelector = '.wrapper';
const buttonSelector = '.block, .link';
const activeClass = 'active';

$(itemSelector).on('click', buttonSelector, e => {
  $(e.delegateTarget).toggleClass(activeClass);
});

// или

document.querySelectorAll(itemSelector).forEach(function(n) {
  n.querySelectorAll(buttonSelector).forEach(m => m.addEventListener('click', this));
}, e => e.currentTarget.closest(itemSelector).classList.toggle(activeClass));

// или

document.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick(e) {
  const button = e.target.closest(buttonSelector);
  if (button) {
    this.classList.toggle(activeClass);
  }
}

// или

document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  const item = button && button.closest(itemSelector);
  item && item.classList.toggle(activeClass);
});

Comments

[Im p3l]

А если при активном блоке border:hover должен быть тоже другим цветом, как на стандартном блоке, то как это можно сделать?

[0xD34F]

Lo Ran, серьёзно? Про :hover не слышали?