jQuery遍历和简单代码

jQuery Traversing and simple code?

本文关键字：代码 简单 遍历 jQuery      更新时间：2023-09-26

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

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

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

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

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

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>

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

相关文章：