0

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

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

这是代码：http: //jsfiddle.net/2Yr67/

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

我有两个让我高兴的想法。

A) 让一个面板淡入，并根据“点击”的“主网格”框将内容填充到面板中 B) 让内容淡入的特定面板，基于选择的“主网格”

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

提前致谢！

4

1 回答 1

0

首先要做的是将您的面板 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>

我添加了面板类以具有与主网格相同的 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/

于 2014-04-11T18:21:02.650 回答