0

我正在使用 jQuery 做某种评估表格。它本质上是 HTML 表格形式的网格或矩阵。我想对 2x5 个表格单元格应用点击（以及稍后的悬停）事件。单击表格单元格时，我按列收集所有元素。我单击的列和左侧的列（我称之为选择栏）我想将类应用到右侧的列（这是 nar，“no bar”的缩写）我想从中删除类。

我想我已经弄清楚了选择过程，即使它可以改进。只是即使在我所做的 .hasClass() 测试失败时也会应用类。

一些代码，如果你愿意的话。这是我的静态 HTML 模板：

<tr class="boss">
    <td class="question" rowspan="2">Executing for results</td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-head click-head"></td>
    <td class="radio"></td>
    <td class="radio"></td>
    <td class="radio"></td>
</tr>
<tr class="employee">
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail"></td>
    <td class="radio answer-head"></td>
    <td class="radio"></td>
</tr>

这是我的 .click()：

$("td.radio").click(function() {
    var bar = $(this).prevUntil("td.question").andSelf();
    var nar = $(this).nextAll("td.click-head, td.click-tail, td.click");
    var row = $(this).parent();
    var bro = null;
    if (row.hasClass("boss")) {
        bro = row.next("tr.employee").children().eq($(this).index() - 1);
    } else if (row.hasClass("employee")) {
        bro = row.prev("tr.boss").children().eq($(this).index() + 1);
    }
    bar.push(bro.prevAll("td.radio").add(bro));
    nar.push(bro.nextAll("td.click-head, td.click-tail, td.click"));
    bar.each(function(i, e) {
        if ($(e).hasClass("answer-head")) {
            $(e).addClass("click-head");
        } else if ($(e).hasClass("answer-tail")) {
            $(e).addClass("click-tail");
        } else {
            $(e).addClass("click");
        }
    });
    nar.each(function(i, e) {
        $(e).removeClass("click-head").removeClass("click-tail").removeClass("click");
    });
});

问题是这个脚本给了我一些奇怪的错误。即，单击第二行中的最后一个表格单元格将导致：

<tr class="boss">
    <td class="question" rowspan="2">Executing for results</td>
    <td class="radio answer-tail click-tail click-head"></td>
    <td class="radio answer-head click-head"></td>
    <td class="radio click-head"></td>
    <td class="radio click-head"></td>
    <td class="radio click-head"></td>
</tr>
<tr class="employee">
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-tail click-tail"></td>
    <td class="radio answer-head click-head"></td>
    <td class="radio click"></td>
</tr>

第一行中的最后一个单元格被赋予了错误的类。在我的 bar.each() 中，我检查当前单元格是否具有 .answer-head 类，如果没有，则应使用 .click。这以某种方式被覆盖，并且无论如何都会给出 .click-head 。

为什么？

编辑：这是一个小提琴： http: //jsfiddle.net/tSyLj/（依赖于WebKit：Chrome或Safari ...）

4

0 回答 0