На jQuery не работает .addClass()

[olorin]

суть проблемы такова. На сайте нужно удалить один класс и добавить другой. Т.к. в js и в jquery - я еще тот нуб то решил сначала попробовать на codepen написать в итоге такая вот беда: removeCass() срабатвает, а вот addClass() нет.
HTML:
<div id="cart" class="test1">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro tempore, adipisci, magni iusto officia deleniti, dolorem molestias iste totam laudantium error maxime ad libero enim nulla. Nam et, aliquid blanditiis!
</div>
<button id="btn">click</button>
CSS:
.test1 {
  color: red;
}
test2 {
  background-color: blue;
  color: #fff;
}

jQuery:
$(document).ready(function(){
  $('#btn').on("click", function(event){
    $('div #cart').addClass('test2');
    $('#cart').removeClass('test1');
  })
});

[RGB]

$('#cart').addClass('test2');

вместо

$('div #cart').addClass('test2');

т.к. вы указали в селекторе по сути искать элемент с ид #cart, который лежит внутри div, а у вас сам этот div имеет такой ид

[olorin]

2 часа назад, RGB сказал:

$('#cart').addClass('test2');

вместо

$('div #cart').addClass('test2');

т.к. вы указали в селекторе по сути искать элемент с ид #cart, который лежит внутри div, а у вас сам этот div имеет такой ид

и так тоже пробовал, всё равно не рабоатет... Вообще изначально был вариант без div-а. Это уже потом я добавил div

Изначально было так.

Змінено 23 квітня 2017 користувачем olorin

[RGB]

Как это не работает?

Другое дело, что вы в css не указали нормально второй класс:

.test1 {
  color: red;
}
test2 {
  background-color: blue;
  color: #fff;
}

куда точка пропала у test2?