Krutika Patel Krutika Patel - 5 months ago 10
CSS Question

apply toggleclass function to element which has already one class

There is Css Code

.ulmenu li a {
float: left;
text-decoration: none;
color: white;
padding: 11.5px 16px;
background-color: #808080;
border: 1px solid #fff;
}
.ulmenu li.Tappo a {
background-color: #F39090;
}

.ulmenu li.Sappo a {
background-color: green;
}

.ulmenu li.ABappo a {
background-color: #ccc;
}


And Html code

<div id="Mpanel" class="menu_simple">
<ul class="ulmenu">
<li><a href="#">R</a></li>
<li class="ABappo"><a href="#" style="pointer-events: none; cursor: none">X</a></li>
<li><a href="#">R</a></li>
<li><a href="#">R</a></li>
<li class="Tappo"><a href="#">T</a></li>
<li class="Tappo"><a href="#">T</a></li>
</ul>
</div>


And jquery function for this

$("#Mpanel").on('click', '.ulmenu li', function () {

var AppointType = $(this).text();

if (AppointType == "R") {
$("#spCsCharge").text("500 Rs");
$(this).siblings(".Sappo").toggleClass();
$(this).toggleClass("Sappo");
} else if (AppointType == "T") {
$("#spCsCharge").text("1000 Rs");
$(this).siblings(".Sappo").toggleClass();
$(this).toggleClass("Sappo Tappo");

}

});


constraint is
Select only one at a time.

This is appointment application.
I have problem that when i select any "R" (for-regular) li this works nice.
But for "T"(for-tatkal) it create problem.
After un select of selected li "T" class ".Tappo" can not applies. It is look lies just default li.

What changes required in this code?
I don't know .please tell me.

Answer

The problem is in this line: $(this).siblings(".Sappo").toggleClass();. What you are doing here is this: Look for every sibling with a Sappo-class and toggle all classes. This is not what you want, because it will also remove the Tappo and ABappo classes.

In my example I use $(this).siblings().removeClass(".Sappo");. This means: Get every sibling and remove the class Sappo where it's active. Here is my optimized version:

$("#Mpanel").on('click', '.ulmenu li', function() {

  var AppointType = $(this).children('a').text();
  switch (AppointType) {
    case "R":
      $("#spCsCharge").text("500 Rs");
      break;
    case "T":
      $("#spCsCharge").text("1000 Rs");
      break;
  }

  $(this).siblings().removeClass("Sappo");
  $(this).toggleClass("Sappo");
});
.ulmenu li a {
  float: left;
  text-decoration: none;
  color: white;
  padding: 11.5px 16px;
  background-color: #808080;
  border: 1px solid #fff;
}
.ulmenu li.Tappo a { background-color: #F39090; }
.ulmenu li.Sappo a { background-color: green; }
.ulmenu li.ABappo a { background-color: #ccc; }
#spCsCharge { clear: both; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Mpanel" class="menu_simple">
  <ul class="ulmenu">
    <li><a href="#">R</a></li>
    <li class="ABappo"><a href="#" style="pointer-events: none; cursor: none">X</a></li>
    <li><a href="#">R</a></li>
    <li><a href="#">R</a></li>
    <li class="Tappo"><a href="#">T</a></li>
    <li class="Tappo"><a href="#">T</a></li>
  </ul>
</div>
<div id="spCsCharge"></div>

Comments