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; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<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>