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

You can give it a try here，这仅通过使用.prevAll()来获取行中的前一个单元格来应用水平类。然后使用.end()我们返回$(this)（当前悬停的单元格），使用.closest()前往<tr>，再次使用{{3}获取所有行使用.prevAll()和.find()将单元格置于其中的相同索引处，然后在这些单元格上添加或删除该类。

由于您只是打开和关闭，您可以使用一个映射到mouseneter和mouseleave以及:nth-child()的悬停功能。 .toggleClass()的用法是在这里使用一个悬停处理程序，而不是100个。

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

Answer 2

值得称道的项目。：）

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

jQuery链接/效率建议

2 个答案: