У меня есть кнопка "Выбрать все" и "Отменить выбор", которая при нажатии должна либо добавить, либо удалить класс "выбранный час" ко всем элементам списка. Кажется, я ничего не могу сделать.
В этом примере мне нужно добавить/удалить класс для всех 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 для использования.
Вы не можете добавить или удалить класс, потому что вы не ставите "#", а селектор не найден. Без выбора "#" выберите "hour-selected-mon li".
$("#" + dayID).removeClass('hour-selected');
Разве это не точка или какой-то знак в самом начале строки? Если вы хотите выбрать все эти классы, вы должны добавить ".".
Используйте это в своей функции select all:
$('.hour-select > li').toggleClass('hour-selected', true);
И в вашем отмене выбора измените true на false.
Не использовать .on
Uncaught TypeError: Object [object Object] has no method 'on'
Просто нажмите клик. http://jsfiddle.net/H73VU/
$(this).parent().next().find('li').addClass('hour-selected')