fadeOut() 单个 div 超过多个答案

【问题标题】：fadeOut() single div over multiplefadeOut() 单个 div 超过多个
【发布时间】：2013-02-20 20:43:58
【问题描述】：

我有三个带有“页面”类的 div。对于每个 div 都有一个“信息” div，显示有关该 div 的一些信息。

我想要实现的是，当我单击“页面”div 下的一些文本时，它将淡出，而“信息”将淡入。

即使我对 jQuery 几乎一无所知，我还是设法让它发挥作用。我的 HTML 是：

    <div id="content">

       <div class="page"><p class="click">Click me to open</p></div>
       <div class="info"><div class="closebut"></div></div>

       <div class="page"><p class="click">Click me to open</p></div>
       <div class="info"><div class="closebut"></div></div>

       <div class="page"><p class="click">Click me to open</p></div>
       <div class="info"><div class="closebut"></div></div>

    </div>

我的 jQuery 是：

    $(document).ready(function(){
    $(".info").hide();

    $("p.click").click(function(){ 
        $(".page").fadeOut("slow", function(){ $(".info").fadeIn(); });
    });

    $(".closebut").click(function(){
        $(".info").fadeOut("slow", function(){ $(".page").fadeIn(); });
    });
});

因此，当文档加载时，jQuery 会隐藏“.info” div。当我单击“.click”段落时，“.page”将淡出，最后，“.info”将淡入。然后我有一个 X 用作关闭按钮 (.closebut) 的小图像。

一切正常。但是，当我单击第一个“p.click”时，每个“.page”都会淡出，每个“.info”都会淡入。

由于我需要 5 个或更多“.page”+“.info”，每次淡出/淡入单个 div 的最简单方法是什么？

我的意思是，无需在 html 中创建更多类并扩展 jQuery 代码。提前感谢您的帮助。

【问题讨论】：

结果是如何产生的？页面是硬编码的，还是从数据库中获取的？
硬编码！它将包含一个小图片库。

标签： jquery fadein fadeout

【解决方案1】：

将每个“div 组”放在另一个 div 中。

<div class="parent">
       <div class="page"></div>
       <div class="info"><div class="closebut"></div></div>
       <div id="text"><p class="click">Click me to open</p></div>
</div>

jQuery:

$("p.click").click(function(){ 
    $(this).parent().find(".page").fadeOut("slow", function(){ $(this).parent().find(".info").fadeIn(); });
});

这是我的想法。

【讨论】：

真的很抱歉，我为 HTML 元素输入了错误的代码。
应该放在
里面。我在第一篇文章中解决了这个问题..

【解决方案2】：

您可以使用 jQuery 的 next() 和 prev() 函数，以及 parent()。

$("p.click").click(function(){ 
    var p = $(this);
    p.parent().prev().prev(".page").fadeOut("slow", function(){ p.parent().prev(".info").fadeIn(); });
});

$(".closebut").click(function(){
    var but = $(this);
    but.parent(".info").fadeOut("slow", function(){ but.parent().prev(".page").fadeIn(); });
});

之所以有效，是因为在事件处理程序内部，this 指的是被点击的元素。

【讨论】：

【解决方案3】：

您需要获取被点击项目的parent 和prev 元素，因此被点击项目为this

查看fiddle

$(document).ready(function(){

    $(".info").hide();

    $("p.click").click(function(){ 
        var ele = $(this); 
        $(this).fadeOut("slow", function(){
           $(this).parent().prev('.info').fadeIn(); });
    });

    $(".closebut").click(function(){
        $(this).parent().fadeOut("slow", function(){
            $(this).parent().prev('.page').fadeIn(); 

        });
    });
});

我希望这可以帮助:)

【讨论】：