jQuery的HTML表td unselect无效

Question

I want to select and unselect multiple HTML table td elements. Below is some of my html code for days (1 to 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>

Here is my jQuery code which works for multiple select but not unselect,

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

Here is my css,

td.active_day {
    color: #fff;
    background-color: #285e8e;
    border-color: #193c5a;
}

Answer 1

Better if

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

Try this

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

You should remove your class to make it work.

Answer 2

The class of day is never being removed. So you can just toggle the class of active_day using toggleClass('active_day')

http://api.jquery.com/toggleclass/

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

http://jsfiddle.net/SeanWessell/vs4016zg/

If you needed to do a conditional check to see if something has a class then you would use 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');
    }
});

If you did want to toggle between day and active_day still use toggleclass and pass both classes.

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

Answer 3

You have to use .hasClass() to do similar

Here is example code :

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

Answer 4

Working Sample

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

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