適用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」（正常）李這工作很好。 但是對於「T」（for-tatkal）它會產生問題。 取消選定的「T」類「.Tappo」後，不能應用。這是謊言只是默認李。

此代碼需要進行哪些更改？ 我不知道。請告訴我。

Answer 1

的問題是在這條線：$(this).siblings(".Sappo").toggleClass();。你在這裏做的是這樣的：尋找Sappo-classes的每個兄弟，並切換所有類。這不是你想要的，因爲它也會刪除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>

Answer 2

您需要獲得文本a而不是.li。

變化var AppointType = $(this).text();到var AppointType = $(this).find('a').text();

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

 
    var AppointType = $(this).find('a').text(); 
 

 
    if (AppointType == "R") { 
 
     $("#spCsCharge").text("500 Rs"); 
 
     $(this).toggleClass("Sappo"); 
 
    } else if (AppointType == "T") { 
 
     $("#spCsCharge").text("1000 Rs"); 
 
     $(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; 
 
}

<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" style="clear:both;"></div>

Answer 3

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

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

 
     if (AppointType == "R") { 
 
      $("#spCsCharge").text("500 Rs"); 
 
     } else if (AppointType == "T") { 
 
      $("#spCsCharge").text("1000 Rs"); 
 
     } 
 
      $(this).siblings(".tClass.Sappo").addClass('Tappo').removeClass('Sappo'); 
 
      $(this).siblings(".rClass.Sappo").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; 
 
    }

<body> 
 
    <div id="Mpanel" class="menu_simple"> 
 
     <ul class="ulmenu"> 
 
      <li class="rClass"><a href="#">R</a></li> 
 
      <li class="ABappo"><a href="#" style="pointer-events: none; cursor: none">X</a></li> 
 
      <li class="rClass"><a href="#">R</a></li> 
 
      <li class="rClass"><a href="#">R</a></li> 
 
      <li class="Tappo tClass"><a href="#">T</a></li> 
 
      <li class="Tappo tClass"><a href="#">T</a></li> 
 
     </ul> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
</body>

我在HTML增加2班，並相應修改JS，請讓我知道這是什麼預期