php - How to remove class of li if there is using multiple classes in li -
the html code
echo "<ul id='sub'>"; if($set == null){ echo '<li class="blankseat" ></li>'; }
if in database status yes or no add class in red color
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"; }
this code
$('li').click(function(e) { var $this = $(this);
first part iam adding class when click on 1 of them
if($(this).hasclass('pink')|| $(this).hasclass('yellow') || $(this).hasclass('orange')) { $(this).addclass('booked').removeclass('pink','yellow','orange'); }
here want remove booked class 1 clicked
else { $(this).addclass('pink').removeclass('booked'); $(this).addclass('yellow').removeclass('booked'); $(this).addclass('orange').removeclass('booked'); }}
try this:
$(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>
Comments
Post a Comment