目前，为了将新课程应用于孩子，您需要在屏幕上找到父母所在的区域.card-cats并单击它，如何实现以便您可以在卡片边界内的任意位置单击并给孩子加班？
const cardCats = document.querySelector('.card-section');
function changeColorCard(event) {
if (event.target && event.target.classList.contains('card-cats')) {
event.target.querySelector('.card-cats__slogan').classList.toggle('changeBorder')
event.target.querySelector('.card-cats__triangle').classList.toggle('changeBorderGradient')
event.target.querySelector('.card-cats__main').classList.toggle('changeBorder')
event.target.querySelector('.card-cats__image-circle').classList.toggle('changeBackground')
}
};
cardCats.addEventListener('click', changeColorCard);.card-section {
width 100%;
display: flex;
justify-content: space-evenly;
}
.card-cats {
width: 40%;
border: 2px solid orange;
}
.card-cats__head {
display: flex;
justify-content: center;
background-color: green;
}
.changeBorder {
color: #D91667;
background-color: orange;
}
.changeBorderGradient {
font-size 100px;
}
.changeBackground {
background-color: #D91667;
}<div class="card-section">
<div class="card-cats">
<div class="card-cats__head">
<div class="card-cats__triangle"></div>
<h3 class="card-cats__slogan"><span>Сказочное заморское яство</span></h3>
</div>
<div class="card-cats__main">
<h3 class="card-cats__title">Товар 1</h3>
<p class="card-cats__subtitile">с рыбой</p>
<ul class="card-cats__properti">
<li class="card-cats__properti-item">40 порций</li>
<li class="card-cats__properti-item">2 мыши в подарок</li>
</ul>
<img class="card-cats__image-cat" src="img/home/section-card/cats-logo.svg">
<div class="card-cats__image-circle">
<p class="card-cats__image-circle-top">2</p>
<p class="card-cats__image-circle-bottom">кг</p>
</div>
</div>
<span class="card-cats__bottom">
Чего сидишь? порадуй кота,
<span class="card-cats__bottom-btn">
<a href="#0" class="card-cats__bottom-btn-link"> купи</a>.
</span>
</span>
</div>
<div class="card-cats">
<div class="card-cats__head">
<div class="card-cats__triangle"></div>
<h3 class="card-cats__slogan"><span>Сказочное заморское яство</span></h3>
</div>
<div class="card-cats__main">
<h3 class="card-cats__title">Товар 2</h3>
<p class="card-cats__subtitile">с мясом</p>
<ul class="card-cats__properti">
<li class="card-cats__properti-item">40 порций</li>
<li class="card-cats__properti-item">2 мыши в подарок</li>
</ul>
<img class="card-cats__image-cat" src="img/home/section-card/cats-logo.svg">
<div class="card-cats__image-circle">
<p class="card-cats__image-circle-top">2</p>
<p class="card-cats__image-circle-bottom">кг</p>
</div>
</div>
<span class="card-cats__bottom">
Чего сидишь? порадуй кота,
<span class="card-cats__bottom-btn">
<a href="#0" class="card-cats__bottom-btn-link"> купи</a>.
</span>
</span>
</div>
</div>
为此使用.closest()方法，它将返回具有所需选择器的最近元素或
null.