我的「按類別查看」jQuery代碼可以縮短或精煉嗎？

我正在嘗試更新我的攝影網站，並使用jquery顯示或隱藏我的投資組合的「類別」。我找遍了一個終於想出了這個解決方案在這裏：我的「按類別查看」jQuery代碼可以縮短或精煉嗎？

它的工作原理確定。當您點擊一個類別的按鈕時，它會隱藏其餘的部分並顯示該類別。但是，代碼是否太亂或可以縮短？你們中的任何一個編碼忍者都知道它是合法的還是可以瘦身？

我主要關心我隱藏其他類別的方式。對於每個功能，我會逐個列出所有其他類別，並「顯示」您點擊的類別。因此，如果用戶點擊「肖像」，我首先顯示肖像課，然後逐個隱藏所有其他課程（橫向，個人等）。如果我在路上添加一個類別，我將不得不更新每個功能。沒什麼大不了的，只是想確保沒有更好的方法，並且我的代碼看起來不錯，並且不會導致任何內存問題，因爲我在jQuery中絕對是新手。

在此先感謝您，祝您有美好的一天。

P.S.如果有任何真正的吉布斯想看另一件只會讓我有點困擾的東西，現在，每個div幾乎一個接一個地消失。有什麼辦法可以暫停或什麼東西讓他們全部消失嗎？我希望這是有道理的。我只是想（如果可能的話）讓他們一起動起來，而不是像多米諾骨牌一樣快速崩潰。好。再次感謝！

來源

2012-07-08 user1340081

可以緩存的類別。 – Novak 2012-07-08 06:29:23

您應該緩存類別，而不是每次都嘗試查找它們。

document.ready(function() { 
    var Wedding = $('.wedding'); 
});

對於第二個問題，您需要使用回調函數作爲參數。回調函數只有在主函數完成後纔會執行。

例子：

$('div').click(function() { 
     $(this).animate({'top': '50px'}, 500, function() { 
      //callback - start 
      $(this).text('a'); 
      //callback-end 
    }); 
});

來源

2012-07-08 06:33:57 Novak

謝謝你。我真的很喜歡上面'undefined'的代碼。簡短，甜蜜，而且效果很好。如果我遇到了他的代碼問題，我會看看你的代碼！ – user1340081 2012-07-08 07:06:14

試試這個：

$('button').click(function() { 
    $(this).siblings('.post').hide() // or $('.post').hide() 
    $('.' + this.id).show(500); 
}); 

$('#showall').click(function() { 
    $('.post').show(500); 
});

DEMO

來源

2012-07-08 06:35:54 undefined

是的，我正在考慮'：P' +1':)）' – 2012-07-08 06:38:37

@Tats_innit thanks bro'：）' – undefined 2012-07-08 06:42:13

刪除了我的文章，不用擔心！ – 2012-07-08 06:42:42

做這樣的 http://jsfiddle.net/fedmich/M4G4r/

把裏面的按鈕切換。把裏面.posts 元素確保「畫像」映射到正確的人以「S」

編碼快樂:)

$('.toggles button').click(function(){ 
    var d_id = this.id; 
    var obj_cur = $('.posts .' + d_id); 

    $('.post').not(obj_cur).hide(500); 
    obj_cur.show(500); 
});

來源

2012-07-08 06:43:46 fedmich

提示：移動頂部的按鈕，使其看起來不像彈跳。將按鈕標記爲BOLD或某個標記，以便知道哪些是活動的。 – fedmich 2012-07-08 06:48:44

良好的大膽呼籲和安置。實際上，我將把這些類別設置爲圖形按鈕，這些按鈕將進行動畫處理並位於頂部。我只是舉了一些例子。我感謝您的幫助！ – user1340081 2012-07-08 07:04:49

是的，作爲一個攝影網站，我相信你已經有了這些東西的計劃。 – fedmich 2012-07-08 07:15:38

我的「按類別查看」jQuery代碼可以縮短或精煉嗎？

回答

相關問題