Jquery 淡出（）多个上的单个div

我有三个div和一个class“page”。对于每个div，都有一个“info”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隐藏“.info”div。当我点击段落“.”时，点击“.”页面“将淡出，.info”将淡出。然后我有一个X作为关闭按钮（.closebut）的小图像

一切正常。然而，当我点击第一个“p”时，点击“每一个”。页面“将淡出，每一个“.info”将淡出

既然我需要5个或更多“.page”+“.info”，那么每次淡出/淡出一个div的最简单方法是什么

---

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

您可以使用jQuery的

next（）

和

prev（）

函数以及

parent（）

---

这是因为在事件处理程序中，

This

引用了单击的元素。

您可以使用jQuery的

next（）

和

prev（）

函数以及

parent（）

这是因为在事件处理程序中，

此

引用了单击的元素。

将每个“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>

这是我的想法。

将每个“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>

---

这是我的想法。

您需要为单击的项目获取

父项

和

prev

元素，以便单击的项目是

this

检查这个

---

我希望这能有所帮助：）

您需要为单击的项目获取

父项

和

prev

元素，以便单击的项目是

this

检查这个

---

我希望这能有所帮助：）

结果是如何产生的？页面是硬编码的，还是从数据库中获取的？硬编码！它将包含一个小图像库。结果是如何生成的？页面是硬编码的，还是从数据库中获取的？硬编码！它将包含一个小图片库。我真的很抱歉，我为HTML元素输入了错误的代码。

应该进入。我在第一篇文章中修正了这一点。我真的很抱歉，我为HTML元素输入了错误的代码。

应该进入。我在第一篇文章中就解决了这个问题。。

<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>

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

$(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(); 

        });
    });
});