javascript - 将toggleclass函数应用于已经有一个类的元素

Question

$("#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");

  }

});

.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;
}

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

约束是一次仅选择一个。

这是预约申请。我有一个问题，当我选择任何“R”(常规)li 时，效果很好。但对于“T”(for-tatkal)它会产生问题。取消选择所选的“T”类“.Tappo”后，无法应用。看起来只是默认的李。

此代码需要进行哪些更改？我不知道。请告诉我。

Answer 1

问题出在这一行:$(this).siblings(".Sappo").toggleClass();。您在这里要做的是:查找具有 Sappo 类的每个同级并切换所有类。这不是您想要的，因为它还会删除 Tappo 和 ABappo 类。

在我的示例中，我使用$(this).siblings().removeClass(".Sappo");。这意味着:获取每个同级并删除它处于事件状态的 Sappo 类。这是我的优化版本:

$("#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>