jQuery链接/效率建议

Question

好的,在您查看下面的代码之前,我知道它是AWFUL.这是多余和臃肿,我不是要求任何人修复它:)

我想知道我需要学习什么才能自己修复它.我正在为我的女儿做一个小项目,一个可以在Mobile Safari中查看的交互式乘法表.

我想突出显示导致所选数字的单元格.所以,我创建了这个,我正在分享它,因为我想改进它,但我还没有足够的知识.

我需要学习哪些原则来改进这种功能？

你可以在这里看到整件事:http://dandenney.com/dev/jasmultiplication

100(10 x 10)是我想要实现的一个例子,但我想为每个数字做到这一点:

// This starts base functionality of highlighting the involved numbers, 10x10=100
$(document).ready(function() {
    $(".tenxten").hover(function () {
            $("td").addClass("non-choice");
            }, function () {
            $("td").removeClass("non-choice");
    });
    $(".tenxten").hover(function () {
            $(".twoxten, .threexten, .fourxten, .fivexten, .sixxten, .sevenxten,  .eightxten, .ninexten").addClass("vertical-trail");
            }, function () {
            $(".twoxten, .threexten, .fourxten, .fivexten, .sixxten, .sevenxten, .eightxten, .ninexten").removeClass("vertical-trail");
    });
    $(".tenxten").hover(function () {
            $(".tenxtwo, .tenxthree, .tenxfour, .tenxfive, .tenxsix, .tenxseven, .tenxeight, .tenxnine").addClass("horizontal-trail");
            }, function () {
            $(".tenxtwo, .tenxthree, .tenxfour, .tenxfive, .tenxsix, .tenxseven, .tenxeight, .tenxnine").removeClass("horizontal-trail");
    });
    $(".tenxten").hover(function () {
            $(".vertical-ten, .horizontal-ten").addClass("choice");
            }, function () {
            $(".vertical-ten, .horizontal-ten").removeClass("choice");
    });
});                

Answer 1

要获得10x10效果,您可以使用您正在悬停的行,其中的索引<td>以及.prevAll()两者都可以获得对右侧单元格的效果,如下所示:

$(function() {
  $("#multiplication").delegate("tr:gt(0) td:not(:first-child)", "hover", function() {
    $(this).toggleClass("choice").prevAll().toggleClass("horizontal-trail")
     .end().closest('tr').prevAll().find('td:nth-child('+($(this).index()+1)+')')
                                   .toggleClass('vertical-trail');
  });
});

你可以在这里尝试一下,这只是通过使用.prevAll()来获取行中的前一个单元格来应用水平类.使用然后.end()我们回去$(this)(当前悬停的单元格),去到它的<tr>使用.closest(),再次之前获得的所有行,使用.prevAll()和使用得到相同的索引处的细胞在其中.find()和:nth-child(),然后加入或对这些细胞中去除的类.

由于您只是打开和关闭,您可以使用一个映射到两者mouseneter并mouseleave结合使用的悬停功能.toggleClass().的.delegate()使用是有一个,而不是100这里悬停处理程序.

初始选择器"tr:gt(0) td:not(:first-child)"不是第一行,而不是其他行中最左边的单元格,因此这可以防止主数字执行此功能,因此它只会发生在表格中.