$("#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”后,无法应用。看起来只是默认的李。
此代码需要进行哪些更改? 我不知道。请告诉我。
最佳答案
问题出在这一行:$(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>
关于javascript - 将toggleclass函数应用于已经有一个类的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37937219/