0

[![при клике на .Card или .Link должен меняться фон (#e52e7a) у .Card, и .Card-ItemWeight плюс у .Promotion должен меняться текст плюс у Card-Heading должен меняться цвет текста. Вопрос: как это все сделать через jQuery? И как потом по клику по карточке отменить селект.

$('.Card').on('click', function() {
	
	$(this).css('background-color', '#e52e7a');

});
* {
	box-sizing: border-box;
}
.ContentContainer {
	margin: auto;
	width: 1280px;
	height: 680px;
	vertical-align: top;
	position: absolute;
	top: 0;
    right: 0;
    bottom: 0;
	left: 0;
}
.PageBackground {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%), url(../img/background.png);
	background-color: #fff;
}
.Heading {
	margin: 0;
	padding-top: 36px;
	font: 100 36px 'Exo 2.0 Thin', sans-serif;
	color: #fff; 
	text-shadow: 0 1px 1px #000;
	text-align: center;
}
.Container {
	display: inline-block;
	width: 320px;
	height: auto;
	margin-top: 23px;
	margin-left: 80px;
	border: 1px solid red;
	vertical-align: top;
	cursor: pointer;
}

.Card {
	margin: 0;
	width: 320px;
	height: 480px;
	background-color: #2ea8e6;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
	clip-path:         polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
}


.Card::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 312px;
	height: 472px;
	border-radius: 10px;
	background-color: #f2f2f2;
	-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
	clip-path: polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
	z-index: 1;

}
.Card:hover, .Card:hover .Card-ItemWeight {
	background-color: #e52e7a;
}

.Card-Heading {
	position: relative;
	font: 16px 'Trebuchet MS', sans-serif;
	color: #666666;
	margin: 0;
	padding: 21px 0 0 51px; 
	z-index: 2;
	
}
.Card-Title {
	position: relative;
	font: 700 48px 'Trebuchet MS', sans-serif;
	color: #000;
	margin: 0;
	padding: 6px 0 0 48px; 
	z-index: 3;
}
.Card-SubTitle {
	position: relative;
	font: 700 24px 'Trebuchet MS', sans-serif;
	color: #000;
	margin: 0;
	padding: 0 0 0 51px; 
	z-index: 4;
}
.Card-Details {
	position: relative;
	font: 400 14px/16px 'Trebuchet MS', sans-serif;
	color: #666666;
	margin: 0;
	padding: 15px 0 0 51px;
	z-index: 5;
	
}
.Card-Details_font_bold {
	font-weight: 700;
}
.Card-Image {
	position: absolute;
	bottom: 4px;
	left: 4px;
	z-index: 6;
	
}
.Card-ItemWeight {
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 80px;
	height: 80px;
	background-color: #2ea8e6;
	border-radius: 50%;
	z-index: 7;
}



.Card-ItemWeightText {
	margin: 0;
	padding-top: 24px; 
	text-align: center;
	font: 400 42px/22px 'Trebuchet MS', sans-serif;
	color: #fff;
}
.Card-ItemWeightText_font_s {
	margin: 0;
	padding: 0 30px;
	font-size: 21px;
}
.Promotion {
	margin: 0;
	padding-top: 14px;
	font: 13px 'Trebuchet MS', sans-serif;
	color:#fff;
	text-align: center;
	word-wrap: break-word;
}
.Link {
	font: 700 13px 'Trebuchet MS', sans-serif;
	color: #22a7e9;
	text-decoration: none;
	border-bottom: 1px dashed;
	text-align: center;
}
<body>
		<div class="ContentContainer PageBackground">
			<h1 class="Heading">Ты сегодня покормил кота?</h1>
			<div class="Container">
				<div class="Card">
					<p class="Card-Heading">Сказочное заморское яство</p>
					<h2 class="Card-Title">Нямушка</h2>
					<h3 class="Card-SubTitle">с фуа-гра</h3>
					<p class="Card-Details"><span class="Card-Details_font_bold">10</span> порций <br> мышь в подарок</p>
					<img class="Card-Image" src="img/cat.png" width="314" height="272" alt="cat">	
					<div class="Card-ItemWeight">
						<p class="Card-ItemWeightText">0,5<br>
							<span class="Card-ItemWeightText_font_s">кг</span>
						</p>
					</div>
				</div>
				<p class="Promotion Promotion-TextOne">Чего сидишь? Порадуй котэ, <a class="Link" href="#">купи.</a></p>
			</div>

			<div class="Container">
				<div class="Card">
					<p class="Card-Heading">Сказочное заморское яство</p>
					<h2 class="Card-Title">Нямушка</h2>
					<h3 class="Card-SubTitle">с рыбой</h3>
					<p class="Card-Details"><span class="Card-Details_font_bold">40</span> порций <br> <span class="Card-Details_font_bold">2</span> мыши в подарок</p>
					<img class="Card-Image" src="img/cat.png" width="314" height="272" alt="cat">
					<div class="Card-ItemWeight">
						<p class="Card-ItemWeightText">2<br>
							<span class="Card-ItemWeightText_font_s">кг</span>
						</p>
					</div>
				</div>
				<p class="Promotion Promotion-TextTwo">Чего сидишь? Порадуй котэ, <a class="Link" href="#">купи.</a></p>
			</div>

			<div class="Container">
				<div class="Card">
					<p class="Card-Heading">Сказочное заморское яство</p>
					<h2 class="Card-Title">Нямушка</h2>
					<h3 class="Card-SubTitle">с курой</h3>
					<p class="Card-Details"><span class="Card-Details_font_bold">100</span> порций <br> <span class="Card-Details_font_bold">5</span> мышей в подарок <br> заказчик доволен</p>
					<img class="Card-Image" src="img/cat.png" width="314" height="272" alt="cat">
					<div class="Card-ItemWeight">
						<p class="Card-ItemWeightText">5<br>
							<span class="Card-ItemWeightText_font_s">кг</span>
						</p>
					</div>
				</div>
				<p class="Promotion Promotion-TextThree">Чего сидишь? Порадуй котэ, <a class="Link" href="#">купи.</a></p>
			</div>
		</div>

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="js/main.js" defer></script>
		
	</body>

]1]1

1 ответ 1

1

$('.Card').on('click', function() {
	
	$(this).toggleClass("Card_active");

});
* {
	box-sizing: border-box;
}
.ContentContainer {
	margin: auto;
	width: 1280px;
	height: 680px;
	vertical-align: top;
	position: absolute;
	top: 0;
    right: 0;
    bottom: 0;
	left: 0;
}
.PageBackground {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.5) 100%), url(../img/background.png);
	background-color: #fff;
}
.Heading {
	margin: 0;
	padding-top: 36px;
	font: 100 36px 'Exo 2.0 Thin', sans-serif;
	color: #fff; 
	text-shadow: 0 1px 1px #000;
	text-align: center;
}
.Container {
	display: inline-block;
	width: 320px;
	height: auto;
	margin-top: 23px;
	margin-left: 80px;
	border: 1px solid red;
	vertical-align: top;
	cursor: pointer;
}

.Card {
	margin: 0;
	width: 320px;
	height: 480px;
	background-color: #2ea8e6;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
	-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
	clip-path:         polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
}


.Card::before {
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: 312px;
	height: 472px;
	border-radius: 10px;
	background-color: #f2f2f2;
	-webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
	clip-path: polygon(15% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 10%);
	z-index: 1;

}

.Card_active {
  background-color:  #e52e7a;
}

.Card-Heading {
	position: relative;
	font: 16px 'Trebuchet MS', sans-serif;
	color: #666666;
	margin: 0;
	padding: 21px 0 0 51px; 
	z-index: 2;
}

.Card_active .Card-Heading {
  color:  #e52e7a;
}




.Card-Title {
	position: relative;
	font: 700 48px 'Trebuchet MS', sans-serif;
	color: #000;
	margin: 0;
	padding: 6px 0 0 48px; 
	z-index: 3;
}
.Card-SubTitle {
	position: relative;
	font: 700 24px 'Trebuchet MS', sans-serif;
	color: #000;
	margin: 0;
	padding: 0 0 0 51px; 
	z-index: 4;
}
.Card-Details {
	position: relative;
	font: 400 14px/16px 'Trebuchet MS', sans-serif;
	color: #666666;
	margin: 0;
	padding: 15px 0 0 51px;
	z-index: 5;
	
}
.Card-Details_font_bold {
	font-weight: 700;
}
.Card-Image {
	position: absolute;
	bottom: 4px;
	left: 4px;
	z-index: 6;
	
}
.Card-ItemWeight {
	position: absolute;
	right: 16px;
	bottom: 16px;
	width: 80px;
	height: 80px;
	background-color: #2ea8e6;
	border-radius: 50%;
	z-index: 7;
}

.Card_active .Card-ItemWeight {
  background-color:  #e52e7a;
}



.Card-ItemWeightText {
	margin: 0;
	padding-top: 24px; 
	text-align: center;
	font: 400 42px/22px 'Trebuchet MS', sans-serif;
	color: #fff;
}
.Card-ItemWeightText_font_s {
	margin: 0;
	padding: 0 30px;
	font-size: 21px;
}
.Promotion {
	margin: 0;
	padding-top: 14px;
	font: 13px 'Trebuchet MS', sans-serif;
	color:#fff;
	text-align: center;
	word-wrap: break-word;
}

.Promotion .Promotion_second {
  display: none;
}

.Card_active + .Promotion .Promotion_first {
  display: none;
}

.Card_active + .Promotion .Promotion_second {
  display: inline-block;
}

.Link {
	font: 700 13px 'Trebuchet MS', sans-serif;
	color: #22a7e9;
	text-decoration: none;
	border-bottom: 1px dashed;
	text-align: center;
}
<body>
		<div class="ContentContainer PageBackground">
			<h1 class="Heading">Ты сегодня покормил кота?</h1>
			<div class="Container">
				<div class="Card">
					<p class="Card-Heading">Сказочное заморское яство</p>
					<h2 class="Card-Title">Нямушка</h2>
					<h3 class="Card-SubTitle">с фуа-гра</h3>
					<p class="Card-Details"><span class="Card-Details_font_bold">10</span> порций <br> мышь в подарок</p>
					<img class="Card-Image" src="img/cat.png" width="314" height="272" alt="cat">	
					<div class="Card-ItemWeight">
						<p class="Card-ItemWeightText">0,5<br>
							<span class="Card-ItemWeightText_font_s">кг</span>
						</p>
					</div>
				</div>
				<p class="Promotion Promotion-TextOne"> 
        <span class="Promotion_first">Чего сидишь? Порадуй котэ, <a class="Link" href="#">купи.</a></span>
        <span class="Promotion_second">Не покупай, <a class="Link" href="#">ок?</a></span>
        </p>
			</div>

			<div class="Container">
				<div class="Card">
					<p class="Card-Heading">Сказочное заморское яство</p>
					<h2 class="Card-Title">Нямушка</h2>
					<h3 class="Card-SubTitle">с рыбой</h3>
					<p class="Card-Details"><span class="Card-Details_font_bold">40</span> порций <br> <span class="Card-Details_font_bold">2</span> мыши в подарок</p>
					<img class="Card-Image" src="img/cat.png" width="314" height="272" alt="cat">
					<div class="Card-ItemWeight">
						<p class="Card-ItemWeightText">2<br>
							<span class="Card-ItemWeightText_font_s">кг</span>
						</p>
					</div>
				</div>
				<p class="Promotion Promotion-TextOne"> 
        <span class="Promotion_first">Чего сидишь? Порадуй котэ, <a class="Link" href="#">купи.</a></span>
        <span class="Promotion_second">Не покупай, <a class="Link" href="#">ок?</a></span>
        </p>
			</div>

			<div class="Container">
				<div class="Card">
					<p class="Card-Heading">Сказочное заморское яство</p>
					<h2 class="Card-Title">Нямушка</h2>
					<h3 class="Card-SubTitle">с курой</h3>
					<p class="Card-Details"><span class="Card-Details_font_bold">100</span> порций <br> <span class="Card-Details_font_bold">5</span> мышей в подарок <br> заказчик доволен</p>
					<img class="Card-Image" src="img/cat.png" width="314" height="272" alt="cat">
					<div class="Card-ItemWeight">
						<p class="Card-ItemWeightText">5<br>
							<span class="Card-ItemWeightText_font_s">кг</span>
						</p>
					</div>
				</div>
				<p class="Promotion Promotion-TextOne"> 
        <span class="Promotion_first">Чего сидишь? Порадуй котэ, <a class="Link" href="#">купи.</a></span>
        <span class="Promotion_second">Не покупай, <a class="Link" href="#">ок?</a></span>
        </p>
			</div>
		</div>

		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="js/main.js" defer></script>
		
	</body>

2
  • спасибо за помощь. Но есть проблема: класс да, меняется, но стили не срабатывают почему то...не пойму пока
    – Dmitry
    7 июн 2018 в 21:04
  • все заработало! Спасибо.
    – Dmitry
    7 июн 2018 в 21:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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