jQuery鏈接/效率建議

好的，在您查看下面的代碼之前，我知道它是AWFUL。這是多餘的和臃腫，我不是要求任何人修復它:)jQuery鏈接/效率建議

我想知道我需要研究，以便自己解決它。我正在爲我的女兒開發一個小型項目，這是一個交互式乘法表，可以在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"); 
    }); 
});

來源

2010-09-03 Dan Denney

我還沒仔細研究過你的代碼，但我認爲你可以通過使用'.data（）'方法使它更優雅，它允許你用任何匹配的元素存儲任意數據。見http://api.jquery.com/data/ – 2010-09-03 02:28:55

要獲得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)（當前懸停的單元格），去到它的<tr>使用.closest()，再次證明使用.prevAll()之前獲得的所有行，並使用.find()和:nth-child()讓其中的同一指標在細胞中，然後添加或刪除這些細胞上的課。

由於您只是打開和關閉，所以您可以使用一個懸停功能，該功能將映射到mouseneter和mouseleave並結合.toggleClass()。該.delegate()用途是在這裏有一個懸停處理，而不是100

初始選擇"tr:gt(0) td:not(:first-child)"是說沒有在第一行，而不是最左邊的細胞在其他行，所以這可以防止主號碼從執行這個函數，所以它只會發生在表中。

來源

2010-09-03 02:42:54

哇！真棒的東西...帽子了，先生... :) – 2010-09-03 02:50:35

真棒！我很抱歉，我在迴應方面如此落後，我以爲我已經設置了電子郵件通知。謝謝，有很多可以從中學習。 – 2010-09-03 22:14:05

@丹 - 歡迎:)如果它解決了您的問題，請務必接受有關此問題和未來問題的答案:) – 2010-09-03 22:20:08

值得讚揚的項目。 :)

鏈接不一定會影響性能/效率，但選擇器，我想。即使在設計時，一個元素可能有多個類名稱，所以我會仔細地在矩陣上放置類，以便比現在少得多的hover。像所有的行都有一個共同的類，所有的列將有他們的共同類等

來源

2010-09-03 02:32:18

jQuery鏈接/效率建議

回答

相關問題