Question

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

我想要实现的是当我点击“page”div下面的一些文字时，它会fadeOut，而“info”将会淡入。

即使我几乎不了解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”将fadeOut，最后，“。info”将淡入。然后我有一个X的小图像作为关闭按钮（.closebut）。

一切正常。然而，当我点击第一个“p.click”每个“.page”将fadeOut和每个“.info”将淡入。

由于我需要5个以上的“.page”+“。info”，每次fadeOut / fadeIn一个div的最简单方法是什么？

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

Answer 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(); });
});

这是我的主意。

Answer 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引用了被单击的元素。

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

        });
    });
});

我希望这可以帮助:)

fadeOut（）单个div多个

3 个答案: