HTML таблица td отменить выбор с помощью jQuery не работает

Question

Я хочу выбрать и отменить выбор нескольких элементов таблицы 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;
}

javascript jquery html css asp.net-mvc

0

AMeh 14 Дек 2015 в 21:39

Answer 1

Класс дня никогда не удаляется. Таким образом, вы можете просто переключать класс 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')
});

2

Sean Wessell 14 Дек 2015 в 18:49

Answer 2

Рабочий образец

http://jsfiddle.net/Dhanck/4zr2djzh/

$('td').click(function () {
    $(this).toggleClass('active_day')
});

0

Daniel Forbes 14 Дек 2015 в 19:01

Answer 3

Вы должны использовать .hasClass(), чтобы сделать подобное

Вот пример кода:

$('td').click(function () {
    if ($(this).hasClass( "active_day" )) {
        $(this).addClass('day');
    } else {
        $(this).addClass('active_day');
    }
});

0

Bhavin Solanki 14 Дек 2015 в 18:47

Answer 4

Лучше если

if ($('#someElement').hasClass('your-class')

Попробуй это

else {
    $(this).removeClass('active-day');  
    $(this).addClass('day');
}

Вы должны удалить свой класс, чтобы он работал.

2

john 14 Дек 2015 в 18:43

HTML таблица td отменить выбор с помощью jQuery не работает

4 ответа

Похожие вопросы

Новые вопросы

javascript