jQuery链接/效率建议

好的，在你回顾下面的代码之前，我知道这很糟糕。这是多余和臃肿的，我不要求任何人来修复它：

我想知道我需要学习什么才能自己解决这个问题。我正在为我女儿做一个小项目，一个交互式乘法表，她可以在Mobile Safari中查看

我想突出显示指向选定数字的单元格。所以，我创造了这个，我分享它，因为我想改进它，但我还没有足够的知识

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

你可以在这里看到整个情况：

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

值得称赞的项目：

---

链接不一定会影响性能/效率，但我认为选择器会。即使在设计时，一个元素也可能有多个类名，因此我会小心地将类放在矩阵上，这样我就可以在比现在更少的悬停次数下获得所需的效果。就像所有行都有一个公共类一样，所有列都有各自的公共类，等等。

要获得10x10效果，您可以使用悬停的行、其中的索引，并且两者都可以在正确的单元格上获得效果，如下所示：

$(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');
  });
});

，这将通过仅使用获取行中的前一个单元格来应用水平类。然后使用我们返回到$this当前悬停的单元格，转到它正在使用，再次获取使用之前的所有行，并使用和获取它们中相同索引的单元格，然后添加或删除这些单元格上的类

由于您只需打开和关闭鼠标，因此可以使用一个悬停功能，该功能可以映射到mouseneter和mouseleave，并结合使用。这里使用的是一个悬停处理程序，而不是100个

---

初始选择器tr:gt0 td:not:first child表示不是第一行，也不是其他行中最左边的单元格，因此这会阻止主数字执行此函数，因此它只会发生在表中。

我没有仔细研究您的代码，但我认为您可能可以使用.data方法使其更加优雅，它允许您使用匹配的元素存储任意数据。看，哇！很棒的东西。。。脱帽致敬，先生…：令人惊叹的很抱歉，我没有及时回复，我以为我已经为电子邮件通知做好了准备。谢谢，从中可以学到很多东西。@Dan-欢迎：如果这个问题解决了你的问题，一定要接受关于这个问题和未来问题的答案：太棒了，我接受了。这是了解您所使用的技术的一个很好的例子。一个数字的22行替换为81个数字的6行。