jQuery: Изменение одного класса с несколькими кнопками

Question

Я просто пытаюсь изменить цвет фона на div с помощью нескольких кнопок, код, который я придумал, до сих пор работает, но просто продолжает добавлять дополнительные классы в контейнер .eaStaff div вместо того, чтобы переключать их, я сначала попытался использовать .attr, но мне нужно сохранить класс .eaStaff, используя .attr, удалил/заменил этот класс.

FIDDLE

//BG COLOUR 
$('.bg a').click(function (e) { 
    e.preventDefault(); 
    console.log('dd', $(this).data('class')) 
    $('.eaStaff').toggleClass($(this).data('class')); 
}); 

Answer 1

Переключить класс либо удаляет или добавляет определенный класс к элементу, это не ясно другие классы. Вместо этого вы можете удалить другие классы перед добавлением этого класса.

$('.eaStaff').removeClass('transBG darkBg lightBg'); 
$('.eaStaff').addClass($(this).data('class')); 

https://jsfiddle.net/p34r7m87/5/