Question

我有一个div来显示/隐藏点击，这个div将通过ajax加载从me.html加载内容。我正在添加一个添加到此标记的类类，然后当我再次单击添加了类的标记时，它应该隐藏div。但这不起作用。

$(function() {
    $("#nav a").click(function() { 
        $(this).toggleClass('added');
        if($(".o1").length <= 0) { 
            $("body").append('<div class="o1"></div>');
            $(".o1").load("me.html").css("display","block");
        }
        $(".added").click(function() { 
            $(".o1").css("display","none");
        })
    });
});

有什么想法吗？

Answer 1

试试这个。如果该对象不存在，这将设置该对象。然后，一旦它完成，它将切换它，如果为将来的点击。

$(function() {
    $("#nav a").click(function() { 
        $(this).toggleClass('added');
        if($(".o1").length <= 0)
        { 
            $("body").append('<div class="o1"></div>');
            $(".o1").load("me.html");
        } else if($(this).hasClass("added"))
            $(".o1").hide();
        } else {
            $(".o1").show();
        }
    });
});

在您的代码的所有click链接中添加.added处理程序会产生问题，因为您的代码中存在问题。

这显示了正在发生的事情的时间表。希望你能跟随。括号中的数字是事件。相同的数字表示它们同时发生。

（1）#nav a点击然后 #nav a获得added 类，然后添加 .o1 然后 added类的任何链接都会获得点击事件

（2）#nav a被点击然后 #nav a删除added 类 .o1已存在< strong>那么任何与added类的链接都会获得点击事件（但不是此链接，但它仍然有之前的点击事件，因为它没有被删除）

（2）.added也被视为与上述行动同时点击，因为它是在（1）期间附加的

（3）#nav a被点击然后 #nav a获得added 类，然后 .o1已经存在然后 added类的任何链接都会获得点击事件

（3）.added也被视为与上述行动同时点击，因为它是在（1）期间附加的

（4）#nav a被点击然后 #nav a获得added 类，然后 .o1已经存在然后 added类的任何链接都会获得点击事件

（4）.added也被视为与上述行动同时点击，因为它是在（1）期间附加的（4）.added也被视为与上述行动同时被点击，因为它是在（3）期间附加的

等等......

要掌握的关键是你没有分离click事件，而是越来越多地附加事件。

Answer 2

试试这个......

<div class="o1"></div>

$(".o1").hide();

$(function() {

    $("#nav a").click(function() { 

            $(this).toggleClass('added');


            if($(this).hasClass('added') == false){ 

                    $(".o1").load("me.html", function(){$(".o1").show()});

                }

            if($(this).hasClass('added') == true){ 

                    $(".o1").hide();

                })
      });
});

show hide仅适用于ajax调用中的第一次

2 个答案: