Как удалить класс li, если в нем используется несколько классов

Question

Как удалить класс li, если в нем используется несколько классов

HTML код

echo  "<ul id='sub'>";
if($Set == null){
echo '<li class="BlankSeat" ></li>';
}

если в статусе базы данных да или нет добавить класс в красный цвет

elseif($status == 'no' || $status == 'yes'){
echo '<li class="occupied" title="Row'.$val1.'" name="'.$val2.'"value="'.$val3.'"></li>';
}
elseif($name=='PINK'){
echo '<li class="pink" title="Row'.$val1.'" name="'.val2.'"value="'.$val3.'"></li>';
}
elseif($name=='YELLOW'){
echo '<li class="yellow" title="Row'.$val1.'" name="'.$val2.'"value="'.$val3.'"></li>';
}
else{
echo '<li class="orange" title="Row'.$val1.'" name="'.$val2.'"value="'.$val3.'"></li>';
}
echo "</ul>";
}
echo '</div>';
}
else
{
echo "No result Available";
}

Это мой код

$('li').click(function(e) {
var $this = $(this);

Первая часть, где я добавляю класс, когда нажимаю на одну из них.

if($(this).hasClass('pink')|| $(this).hasClass('yellow') ||
$(this).hasClass('orange'))
{
$(this).addClass('Booked').removeClass('pink','yellow','orange');
}

Здесь я хочу удалить забронированный класс, только с одним из которых нажимается

else
{
$(this).addClass('pink').removeClass('Booked');
$(this).addClass('yellow').removeClass('Booked');
$(this).addClass('orange').removeClass('Booked');
}}

-1

html-lists jquery jquery-ui php

Решение

По вопросам рекламы ammmcru@yandex.ru

Accepted Answer

Попробуй это:

$(document).on("click", "li", function(e) {
if($(this).hasClass('pink')|| $(this).hasClass('yellow') || $(this).hasClass('orange')){
$(this).toggleClass("Booked")
console.log($(this).attr("class"))
}
})

.pink{
background-color:pink;
}
.yellow{
background-color:yellow;
}
.orange{
background-color:orange;
}
.Booked{
background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id='sub'>
<li class="BlankSeat"> Item 3</li>
<li class="occupied"> Item 3</li>
<li class="pink"> Item 3</li>
<li class="yellow"> Item 4</li>
<li class="orange"> Item 5</li>
</ul>

1

Другие решения

Использовать этот

$(this).addClass('Booked').removeClass('pink yellow orange');

Смотрите помощь здесь

Редактировать:

Пример JS на мой комментарий ниже

if($(this).hasClass('pink') ||
$(this).hasClass('yellow') ||
$(this).hasClass('orange')) {
$(this).addClass('Booked');
} else if($(this).hasClass('Booked')) {
$(this).removeClass('Booked');
}

Пример CSS к моему комментарию ниже

.Booked {
background-color: blue !important; // whatever style your .Booked should have
}

0

Источник