jQuery遍历和简单的代码？

好的，在我问这个问题之前。让我解释一下我的目标：我想尽可能少编写代码，并且仍然能够同时拥有大量的功能。我已经把它作为“美丽的代码”给我自己和同事们。jQuery遍历和简单的代码？

以下是问题所在：我想单击一个框，并根据所点击的内容根据所需内容淡入面板。除了我不能使用两个类，不能重新使用ID的。

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

我有两个想法，我高兴的。 B）有一个特定的面板，其内容淡入，基于这个面板'maingrid'选择

我不要求你为我做的，只是把我推给朝做什么，我想提前

由于所需的语法！

来源

2014-04-11 DoctorHowes

究竟你。“我不能用两个类，不能再使用的ID”的意思??? –

你能告诉我们相关的标记吗？每个面板都有一个ID吗？ –

我们希望看到一些额外的“美丽”标记来补充此代码，我们可以更好地帮助您解决此问题。 – xCNPx

要做的第一件事是将面板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>

我加入了面板类具有相同的CSS的maingrid，以及使它在开始无形：

.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-11 18:21:02 evasilevsky

jQuery遍历和简单的代码？

回答

相关问题