Question

我正在使用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 ......）

使用jQuery遍历和设置表格样式

0 个答案: