JQuery Цепочка / Советы по эффективности

Question

Хорошо, прежде чем вы ознакомитесь с кодом ниже, я знаю, что это УЖАСНО. Это избыточно и раздуто, и я не прошу никого, чтобы это исправить:)

Мне интересно, что мне нужно изучить, чтобы исправить это самостоятельно. Я работаю над небольшим проектом для моей дочери - интерактивной таблицей умножения, которую она может просматривать в 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)" говорит не о первой строке и не о самых левых ячейках в других строках, поэтому это не позволяет основным функциям выполнять эту функцию, поэтому это произойдет только в таблице.

Answer 2

похвальный проект.:)

Цепочка не обязательно влияет на производительность / эффективность, но селекторы, я полагаю, будут.Один элемент может иметь более одного имени класса даже во время разработки, поэтому я аккуратно установил бы классы в матрице, чтобы получить желаемый эффект за меньшее количество hover, чем у вас сейчас.Как все строки имеют общий класс, каждый столбец будет иметь общий класс и т. Д.