Помогите с логикой замены html + class + text через JS

[TemKa_SD 9]

Здравствуйте. Нужно заменить некоторые данные через JS, с кодом мне всё понятно, не понятно с логикой, как лучше сделать.

 

Имеем вот такой HTML код:

 

<span class="ipsBadge ipsBadge_large ipsBadge_pill {{if $game['slots'] - $game['taken'] > 2}}ipsBadge_positive{{elseif $game['slots'] === $game['taken']}}ipsBadge_negative{{else}}ipsBadge_intermediary{{endif}}">
<span data-countTypeTaken='{$game['gamename']}' data-currentCount='{$game['taken']}'>{$game['taken']}</span>/<span data-countTypeSlots='{$game['gamename']}' data-currentCount='{$game['slots']}'>{$game['slots']}</span>
</span>

 

Где: $game['slots'] - сколько всего слотов в игре, $game['taken'] - текущее количество игроков.

 

Обновление текста я написал, с этим проблем нет, т.е:

 

var takenBefore = parseInt(this.scope.find('[data-countTypeTaken="'+ data.gamename +'"]').attr('data-currentCount'));
var slotsBefore = parseInt(this.scope.find('[data-countTypeSlots="'+ data.gamename +'"]').attr('data-currentCount'));
this.scope.find('[data-countTypeTaken="'+ data.gamename +'"]').attr( 'data-currentCount', takenBefore + 1 ).text(takenBefore + 1);

 

Заходит игрок, добавляем к тексту + 1, но мне еще нужно обработать условия в стилях. Как примерно это сделать?

 

Добавить переменную, где вычитается весь стиль, ipsBadge_positive, ipsBadge_intermediary, ipsBadge_negative и делать замену текущего стиля на новый, только тоже не понятно, либо менять только сам стиль, либо весь класс.

 

-----------------------------------------------

Ну вот это я имел ввиду: только у меня первое условие почему-то не работает, почему? ipsBadge_negative - работает.

// Обновление слотов
var takenBefore = parseInt(this.scope.find('[data-countTypeTaken="'+ data.gamename +'"]').attr('data-currentCount'));
var slots = parseInt(this.scope.find('[data-countTypeSlots="'+ data.gamename +'"]').attr('data-currentCount'));
var takenAfter = takenBefore + 1;
var ipsBadge = null;

if (slots - takenAfter > 2) {
ipsBadge = 'ipsBadge_positive';
} else if (slots === takenAfter) {
ipsBadge = 'ipsBadge_negative';
} else {
ipsBadge = 'ipsBadge_intermediary';
}

this.scope.find('[data-countTypeTaken="'+ data.gamename +'"]').attr( 'data-currentCount', takenAfter ).text(takenAfter);

 

Теперь как лучше заменить текущий class который там уже есть вставленный с html?

Изменено 1 марта 2019 пользователем TemKa_SD

[newbie 1723]

Удалить классы

.removeClass('ipsBadge_intermediary ipsBadge_positive ipsBadge_negative')

Добавить класс

.addClass(ipsBadge)