jQuery Chaining/Efficiency Advice

Question

Хорошо, прежде чем вы просмотрите приведенный ниже код, я знаю, что это AWFUL. Это избыточно и раздуто, и я не прошу кого-нибудь его исправить :)

Мне интересно, что мне нужно для изучения, чтобы исправить это самостоятельно. Я работаю над небольшим проектом для моей дочери, интерактивной таблицы умножения, которую она может просматривать в Mobile Safari.

Я хочу выделить ячейки, которые приводят к выбранному числу. Итак, я создал это, и я делюсь им, потому что я хочу его улучшить, но пока у меня недостаточно знаний.

Какие принципы мне необходимы для изучения, чтобы улучшить эту функциональность?

Вы можете увидеть все это здесь: http://dandenney.com/dev/jasmultiplication

100 (10 х 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, вы можете использовать строку, на которой вы нависаете, индекс в ней и .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) (в настоящее время парило клетку), подойдите к его <tr> с помощью .closest(), снова получить все строки до того, что с помощью .prevAll() и получения клеток, в том же индексе в них с помощью .find() и :nth-child(), то добавления или удаления класс на этих клетках.

Поскольку вы просто включаете и выключаете, вы можете использовать одну функцию зависания, которая сопоставляется как с mouseneter, так и с mouseleave в сочетании с .toggleClass(). .delegate() использования должны иметь один обработчика парения здесь, вместо 100.

Первоначальный селектор "tr:gt(0) td:not(:first-child)" говорит не первый ряд, а не оставили большинство клеток в других рядах, так что это предотвращает основные цифры от исполнения эта функция, так что это произойдет только в таблице.

Answer 2

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

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