0

我有三个带有“页面”类的 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 代码。提前感谢您的帮助。

4

3 回答 3

2

将每个“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(); });
});

这就是我的想法。

于 2013-02-20T00:13:34.880 回答
1

您可以使用 jQuerynext()和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指的是被点击的元素。

于 2013-02-20T00:13:21.147 回答
1

您需要获取parent和被prev点击项目的元素，所以被点击的项目是this

检查这个小提琴

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

        });
    });
});

我希望这可以帮助:)

于 2013-02-20T00:22:29.657 回答