Javascript jQuery遍历和简单代码？

好的，在我问这个问题之前。让我解释一下我的目标：我想写尽可能少的代码，同时仍然能够拥有大量的功能。我给自己和同事创造了一个“美丽的代码”

问题是：我想单击一个框，然后单击一个面板，根据我单击的框淡入所需内容。除了我不能使用两个类，也不能重复使用id

代码如下：

我有两个想法会让我高兴

A） 让一个面板淡入，并根据“单击”的“主网格”框将内容填充到面板中 B） 有一个带有淡入内容的特定面板，根据该面板选择“主网格”

我不是要求你为我做这件事，只是简单地把我推向做我想做的事情所需要的语法

---

提前谢谢

要做的第一件事是将面板HTML元素移近主网格元素。这允许您按顺序隐藏/显示正确的元素。将所有面板放在各自单独的元素中会导致您执行DOM操作，而不需要这样做。为了简单起见，我将每个面板放在与之关联的主网格元素之后

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').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();
        });
    }); 

似乎还有一个bug，在第一个悬停事件中，悬停没有显示文本

---

JSFiddle:

您所说的“我不能使用两个类，也不能重复使用id”到底是什么意思？您能给我们看一下相关的标记吗？每个面板都有id吗？我们希望看到一些额外的“漂亮”标记来补充这段代码，我们可以更好地帮助您解决这个问题。

.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();
        });
    });