jQuery遍歷和簡單代碼？

Question

好吧，在我問這個問題之前。 讓我解釋一下我的目標：我想編寫盡可能少的代碼，並且仍然能夠同時具有大量功能。 我為自己和同事創造了“美麗代碼”。

問題出在這里：我想單擊一個框，然后單擊一個面板以根據單擊的框顯示所需的內容。 除了我不能使用兩個類並且不能重用id之外。

這是代碼： http : //jsfiddle.net/2Yr67/

$('.maingrid').click(function(){
    //'maingrid' fade out
    //'panel' fade in with proper content
});

我有兩個讓我滿意的想法。

A）淡入一個面板，然后根據單擊了哪個“ maingrid”框將內容填充到面板中B）淡入特定內容的特定面板，並根據所選的“ maingrid”

我不是要您為我做這件事，只是將我推向執行我想要的事情所需的語法

提前致謝！

Answer 1

首先要做的是將面板HTML元素移近maingrid元素。 這使您可以按順序隱藏/顯示正確的元素。 將所有面板放置在各自獨立的元素中會導致您進行DOM操作，而不應該這樣做。 為簡單起見，我將每個面板放在與之關聯的maingrid元素之后。

HTML結構

<div class=".mainContainer">
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
   <div class='maingrid'></div>
   <div class='panel'></div>
</div>

我添加了面板類，使其具有與maingrid相同的CSS，並在開始時使其不可見：

.maingrid, .panel {
    height: 345px;
    width: 345px;
    float: left;
    /* [disabled]background-color: #000; */
    margin-top: 5px;
    margin-right: 5px;
    cursor: pointer;
    overflow: hidden;
}
.panel{
    display:none;
    color:white; 
}

這將淡出當前單擊的元素，並淡入下一個面板元素。

$('.maingrid').click(function(){
        var $that = $(this);
        $(this).fadeOut(function(){  //This will wait until the fadeOut is done before attempting to fadeIn.
            $that.next().fadeIn();
        });
    });
    $('.panel').click(function(){
        var $that = $(this);
        $(this).fadeOut(function(){
            $that.prev().fadeIn();
        });
    }); 

似乎還有一個錯誤，即懸停在第一個懸停事件上不顯示文本。

JSFiddle： http : //jsfiddle.net/mDJfE/