Javascript 如何使用toggleClass更改检测到的特定类的css类

我有一些

div

s，有相同的

.hour\u可用的
命名类。并且还包含一些禁用的div，这些div带有
.hour\u slots\u disabled
命名类，它们会随着数据库的响应而更改

现在我想用
更改这些
.hour\u slot\u可用的
div
s。当我
单击
时，slot\u激活了
类

但是，当我单击这些
.hour\u slots\u available
div
s时，其更改为
。slot\u已激活
，但也使用选定的div更改了那些禁用的div

下面是html代码

<li><div id="12_01" class="hour_slots_available" ><span class="hour_tag">12:00 - 01:00</span></div></li>
<li><div class="hour_slots_available" id="01_02"><span class="hour_tag">01:00 - 02:00</span></div></li>
<li><div class="hour_slots_available" id="02_03"><span class="hour_tag">02:00 - 03:00</span></div></li>
<li><div class="hour_slots_available" id="03_04"><span class="hour_tag">03:00 - 04:00</span></div></li>
<li><div class="hour_slots_available" id="04_05"><span class="hour_tag">04:00 - 05:00</span></div></li>

这是输出的图像


请告诉我哪里错了
 试试这个：

$(".hour_slots_available").not(".hour_slots_disabled").click(function () {
        $(this).toggleClass("slot_activated");
});

$（“.hour\u slots\u available”）。单击（函数（）{if（$（此）.hasClass（'hour\u slots\u disabled'））{return；}$（此）.toggleClass（“slot\u activated”）；}；试试这个！它起作用了。。非常感谢bro@Kalpeshsinght第一个解决方案正在运行，感谢另一个解决方案：）
$(".hour_slots_available").not(".hour_slots_disabled").click(function () {
        $(this).toggleClass("slot_activated");
});