Question

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

Answer 1

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用此

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

See help here

编辑：

示例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
}

如果在li中使用多个类，如何删除li的类

2 个答案: