Question

我想选择和取消选择多个HTML表格td元素。以下是我的一些日期（1到31）的HTML代码，

<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;
}

Answer 1

更好，如果

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

试试这个

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

您应该删除您的课程以使其正常工作。

Answer 2

一天的课程永远不会被删除。因此，您只需使用toggleClass切换active_day类（＆＃39; active_day＆＃39;）

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

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

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

如果您需要进行条件检查以查看某个类是否有类，那么您将使用hasClass（＆＃39; active-day＆＃39;）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')
});

Answer 3

您必须使用.hasClass()来执行类似的

以下是示例代码：

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

Answer 4

工作样本

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

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

用jQuery取消选择的HTML表td不起作用

4 个答案: