Я хочу выбрать и отменить выбор нескольких элементов таблицы HTML и тд. Ниже приведен мой HTML-код для дней (с 1 по 31),
<table class=" table-condensed">
<tbody>
<tr>
<td class="day" id="d1">
1
</td>
<td class="day" id="d2">
2
</td>
<td class="day" id="d3">
3
</td>
<td class="day" id="d4">
4
</td>
<td class="day" id="d5">
5
</td>
<td class="day" id="d6">
6
</td>
<td class="day" id="d7">
7
</td>
</tr>
<tr>
<td class="day" id="d8">
8
</td>
<td class="day" id="d9">
9
</td>
....so on
</tr>
</tbody>
</table>
Вот мой код JQuery, который работает для множественного выбора, но не отменить выбор,
$('td.day').click(function () {
if ($(this).className != "active_day") {
$(this).addClass('active_day');
} else {
$(this).addClass('day');
}
});
Вот мой css,
td.active_day {
color: #fff;
background-color: #285e8e;
border-color: #193c5a;
}
4 ответа
Класс дня никогда не удаляется. Таким образом, вы можете просто переключать класс active_day, используя toggleClass ('active_day')
http://api.jquery.com/toggleclass/
$('td.day').click(function () {
$(this).toggleClass('active_day')
});
http://jsfiddle.net/SeanWessell/vs4016zg/
Если вам нужно выполнить условную проверку, чтобы увидеть, есть ли у чего-то класс, вы должны использовать hasClass ('active-day') http://api.jquery.com/hasclass/
$('td.day').click(function () {
if ($(this).hasClass("active_day")) {
$(this).removeClass('active_day');
} else {
$(this).addClass('active_day');
}
});
Если вы хотите переключаться между day и active_day, все равно используйте toggleclass и пропустите оба класса.
$('td.day').click(function () {
$(this).toggleClass('active_day day')
});
Рабочий образец
http://jsfiddle.net/Dhanck/4zr2djzh/
$('td').click(function () {
$(this).toggleClass('active_day')
});
Вы должны использовать .hasClass()
, чтобы сделать подобное
Вот пример кода:
$('td').click(function () {
if ($(this).hasClass( "active_day" )) {
$(this).addClass('day');
} else {
$(this).addClass('active_day');
}
});
Лучше если
if ($('#someElement').hasClass('your-class')
Попробуй это
else {
$(this).removeClass('active-day');
$(this).addClass('day');
}
Вы должны удалить свой класс, чтобы он работал.
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.