Question

我正在研究jQuery中的一些复杂的东西（至少我的标准）并完全坚持如何前进。我或多或少地看到了我头脑中的结构，但是难以将其写入正确运行的jQuery代码中：

点击下一个或上一个时，应突出显示下一个或上一个列，这样可以正常工作。
一旦到达最后一列（R6）并单击下一个，就会出现一个新元素（R7）并删除R1。 R7和其他cols已经在html中，但是用CSS隐藏了。如何让R7出现，R1消失等等？

隐藏表已经在html代码中，你可以在右上角的表格中看到它与种族描述一旦你再点击R6，它将继续到R7直到R12。

我脑子里的逻辑是这样的：

当用户到达最后一个可见的R并单击下一步时，将类“隐形”添加到左侧的R，并将类“可见”添加到右侧的R. Ť
当用户点击上一个时，会发生上述情况。

棘手的部分是让下一个Rn出现在最后一个Rn上。

感谢您查看我的代码：http://jsfiddle.net/yunowork/hVHZb/

Answer 1

这是update of your fiddle，可以随意使用。

这是我添加的代码，用于显示新列并隐藏上一个：

    if ($nextCol.hasClass("invisible")) {
        $nextCol.removeClass("invisible");        
        $nextCol.addClass("visible");
        var $toRem = $nextCol.prev('td').prev('td').prev('td').prev('td').prev('td').prev('td');
        $toRem.removeClass("visible");
        $toRem.addClass("invisible");
    }

previous有类似的代码。我还制作了标题栏12的colspan，这样额外的栏目也落在了它的掌握之中。

代码中唯一“丑陋”的部分是如何找到要删除的列。我刚刚决定回溯6列并隐藏那一列。理想情况下，您希望将该功能抽象出来并使其更加灵活。

编辑：Updated fiddle with fixed prev bug。我在if声明中添加了此内容：if($prevCol.length != 0 && $prevCol.index() >= 8)。我不确定为什么8是数字（我认为它应该是2）但它似乎是4的倍数。

使用jQuery隐藏和显示表中的额外列

1 个答案: