Question

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

问题出在这里：我想点击一个框，然后根据我点击的框点击一个面板以显示所需的内容。除了我不能使用两个类，不能重复使用id。

$('.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/

jQuery遍历和简单的代码？

1 个答案: