Question

我有一个＆＃39;全选＆＃39;并且＆＃39;取消选择所有＆＃39;点击的按钮应该添加或删除课程“小时选择”＆＃39;列出所有项目。我似乎无法做任何事情。

在此示例中，我需要为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');
});

EDIT解决方案：

//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＆＃ 39;使用的ID。

Answer 1

您无法添加或删除课程，因为您不会放置＆＃34;＃＆＃34;和找不到选择器。没有＆＃34;＃＆＃34;选择器外观＆＃34; hour-selected-mon li＆＃34;。

$("#" + dayID).removeClass('hour-selected');

Answer 2

不要使用.on

Uncaught TypeError: Object [object Object] has no method 'on'

只需点击即可。 http://jsfiddle.net/H73VU/

Answer 3

在字符串的最开头是不是一个点或某些符号丢失了？如果要选择所有这些类，则应添加“。”。

Answer 4

在全部选择功能中使用此功能：

$('.hour-select > li').toggleClass('hour-selected', true);

在取消选择时，将true更改为false。

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

4 个答案: