添加/删除多个列表项的类

我有一个“全选”和“取消全选”按钮，当单击它们时，应将“按小时选择”类别添加或删除到所有列表项中。我似乎无法让它做任何事情。

在这个例子中，我需要添加/删除类的所有li范围内的#hour-selected-mon。我相信这就是我想要的dayID回报hour-selected-mon li。

html范例：

<div id="day1" class="col-md-12 margin-bottom-20">
    <label class="f-13">Select active hours for <b>Monday</b> :</label>
    <div class="clearfix margin-top-10 margin-bottom-10">
        <button type="button" class="btn btn-sm btn-primary hourSelect">Select All</button>
        <button type="button" class="btn btn-sm btn-primary hourDeselect">Deselect All</button>
    </div>
    <ol id="hour-selected-mon" class="hour-select clearfix">
        <li class="<?php echo $hours1['12a'] == 1 ? 'hour-selected' : ''; ?>">12am</li>
        <li class="<?php echo $hours1['1a'] == 1 ? 'hour-selected' : ''; ?>">1am</li>
        <li class="<?php echo $hours1['2a'] == 1 ? 'hour-selected' : ''; ?>">2am</li>
        <li class="<?php echo $hours1['3a'] == 1 ? 'hour-selected' : ''; ?>">3am</li>
        <li class="<?php echo $hours1['4a'] == 1 ? 'hour-selected' : ''; ?>">4am</li>
        <li class="<?php echo $hours1['5a'] == 1 ? 'hour-selected' : ''; ?>">5am</li>
        <li class="<?php echo $hours1['6a'] == 1 ? 'hour-selected' : ''; ?>">6am</li>
        <li class="<?php echo $hours1['7a'] == 1 ? 'hour-selected' : ''; ?>">7am</li>
        <li class="<?php echo $hours1['8a'] == 1 ? 'hour-selected' : ''; ?>">8am</li>
        <li class="<?php echo $hours1['9a'] == 1 ? 'hour-selected' : ''; ?>">9am</li>
        <li class="<?php echo $hours1['10a'] == 1 ? 'hour-selected' : ''; ?>">10am</li>
        <li class="<?php echo $hours1['11a'] == 1 ? 'hour-selected' : ''; ?>">11am</li>
        <li class="<?php echo $hours1['12p'] == 1 ? 'hour-selected' : ''; ?>">12pm</li>
        <li class="<?php echo $hours1['1p'] == 1 ? 'hour-selected' : ''; ?>">1pm</li>
        <li class="<?php echo $hours1['2p'] == 1 ? 'hour-selected' : ''; ?>">2pm</li>
        <li class="<?php echo $hours1['3p'] == 1 ? 'hour-selected' : ''; ?>">3pm</li>
        <li class="<?php echo $hours1['4p'] == 1 ? 'hour-selected' : ''; ?>">4pm</li>
        <li class="<?php echo $hours1['5p'] == 1 ? 'hour-selected' : ''; ?>">5pm</li>
        <li class="<?php echo $hours1['6p'] == 1 ? 'hour-selected' : ''; ?>">6pm</li>
        <li class="<?php echo $hours1['7p'] == 1 ? 'hour-selected' : ''; ?>">7pm</li>
        <li class="<?php echo $hours1['8p'] == 1 ? 'hour-selected' : ''; ?>">8pm</li>
        <li class="<?php echo $hours1['9p'] == 1 ? 'hour-selected' : ''; ?>">9pm</li>
        <li class="<?php echo $hours1['10p'] == 1 ? 'hour-selected' : ''; ?>">10pm</li>
        <li class="<?php echo $hours1['11p'] == 1 ? 'hour-selected' : ''; ?>">11pm</li>
    </ol>
</div>

JS：

//toggle for Select All hour selection
$('.hourSelect').on('click', function() {
    var dayID = $(this).parent().next('ol').attr('id')+' li';
    console.log(dayID);
    $(dayID).addClass('hour-selected');
});     

//toggle for Deselect All hour selection
$('.hourDeselect').on('click', function() {
    var dayID = $(this).parent().next('ol').attr('id')+' li';
    console.log(dayID);
    $(dayID).removeClass('hour-selected');
});

编辑解决方案：

//toggle for Select All hour selection
$('.hourSelect').on('click', function() {
    var dayID = $(this).parent().next('ol').attr('id');
    $('#' + dayID + ' li').addClass('hour-selected');
});     

//toggle for Deselect All hour selection
$('.hourDeselect').on('click', function() {
    var dayID = $(this).parent().next('ol').attr('id');
    $('#' + dayID + ' li').removeClass('hour-selected');
});

我缺少ID值的＃号。你们中的许多人都添加了答复，但没有一个能正常工作。＃hour-selected-mon在我的示例中，但是，还会有＃hour-selected-tue，＃hour-selected-wed，....＃hour-selected-sun，这就是为什么我要获取ol的ID的原因用来。