добавить / удалить класс для нескольких элементов списка

0

У меня есть кнопка "Выбрать все" и "Отменить выбор", которая при нажатии должна либо добавить, либо удалить класс "выбранный час" ко всем элементам списка. Кажется, я ничего не могу сделать.

В этом примере мне нужно добавить/удалить класс для всех 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. Многие из вас добавили ответы, но никто из них не работал бы правильно. # час-selected-mon в моем примере, однако, также будет # час-selected-tue, # час-selected-wed,.... # час-selected-sun, поэтому я хватаю идентификатор ol для использования.

  • 0
    Почему бы не $(this).parent().next().find('li').addClass('hour-selected')
Теги:

4 ответа

1
Лучший ответ

Вы не можете добавить или удалить класс, потому что вы не ставите "#", а селектор не найден. Без выбора "#" выберите "hour-selected-mon li".

$("#" + dayID).removeClass('hour-selected');
  • 0
    хороший улов ... это было все, что мне не хватало ... добавил решение выше.
0

Разве это не точка или какой-то знак в самом начале строки? Если вы хотите выбрать все эти классы, вы должны добавить ".".

0

Используйте это в своей функции select all:

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

И в вашем отмене выбора измените true на false.

0

Не использовать .on

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

Просто нажмите клик. http://jsfiddle.net/H73VU/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню