Javascript jQuery:Can'；无法获取。单击以处理div？新手？

这是我第一次真正尝试在我的个人投资组合中使用jQuery，我遇到了一些问题。我希望它有一个小图像的网格（.piece），当单击时，它会向左滑动并显示一个大图像（#largeview）。然后，当您单击（#largeview）时，它应该滑开，并再次显示（.piece）

看看我在做什么

该准则适用于：

 $("#largeview").click(function(){
                                $("#largeview").animate({
                                    opacity: 0,
                                    right: "-1000",

所以我相信是“咔嗒”声没有引起注意。这有什么原因吗？这与CSS中定义的高度/宽度是一致的

这就是整个街区：

$(".piece").click(function(){
                $(".piece").animate({
                        opacity: 0,
                        right: "+=1000",
                    }, 1000, function(){
                            $(".piece").hide();
                            $("#largeview").show();
                            $("#largeview").animate({
                                opacity: 1,
                                right: "0",
                            }, 500, function(){
                                $("#largeview .exit").fadeOut("slow");
                                $("#largeview").click(function(){
                                    $("#largeview").animate({
                                        opacity: 0,
                                        right: "-1000",
                                    }, 500, function(){
                                        $("#largeview").hide();
                                        $(".piece").show();
                                        $(".piece").animate({
                                            opacity: 1,
                                            right: "0", 
                                        }, 1000, function(){
                                            //done

                                        });
                                    });
                                });
                            });
                    });

            });

---

谢谢大家

为您做这项工作：

$(".piece").click(function(){
            $(this).animate({
                    opacity: 0,
                    right: "+=1000",
                }, 1000, function(){
                        $(this).hide();
                        $("#largeview").animate({
                            opacity: 1,
                            right: "0",
                        }, 500, function(){
                            $("#largeview .exit").fadeOut("slow");

                        }).show();
                });

        });

        $("#largeview").click(function(){
                                $(this).animate({
                                    opacity: 0,
                                    right: "-1000",
                                }, 500, function(){
                                    $(this).hide();
                                    $(".piece").animate({
                                        opacity: 1,
                                        right: "0", 
                                    }, 1000, function(){
                                        //done

                                    }).show();
                                });
                            });

---

这对你有用吗

$(".piece").click(function(){
            $(this).animate({
                    opacity: 0,
                    right: "+=1000",
                }, 1000, function(){
                        $(this).hide();
                        $("#largeview").animate({
                            opacity: 1,
                            right: "0",
                        }, 500, function(){
                            $("#largeview .exit").fadeOut("slow");

                        }).show();
                });

        });

        $("#largeview").click(function(){
                                $(this).animate({
                                    opacity: 0,
                                    right: "-1000",
                                }, 500, function(){
                                    $(this).hide();
                                    $(".piece").animate({
                                        opacity: 1,
                                        right: "0", 
                                    }, 1000, function(){
                                        //done

                                    }).show();
                                });
                            });

原因是

#largeview

没有接收到点击事件，它在网站的CSS中有

z-index

的

-1

。这意味着单击事件将弹出到其父级，并且不会以

#largeview

为目标激发。例如，如果将

z-index

更改为

4

，您会注意到页面工作正常

如果您有理由在CSS中使用

z-index:-1

保留

#largeview

，请在它弹出时更改它，以便它将接收单击事件

额外提示：为了检查单击事件的目标元素，我在javascript中添加了以下内容，并在单击时查看页面标题：

$('*').click(function (e) {
    document.title = e.target.tagName + '#' + e.target.id + '.' + e.target.className;
});

原因是

#largeview

没有接收到点击事件，它在网站的CSS中有

z-index

的

-1

。这意味着单击事件将弹出到其父级，并且不会以

#largeview

为目标激发。例如，如果将

z-index

更改为

4

，您会注意到页面工作正常

如果您有理由在CSS中使用

z-index:-1

保留

#largeview

，请在它弹出时更改它，以便它将接收单击事件

额外提示：为了检查单击事件的目标元素，我在javascript中添加了以下内容，并在单击时查看页面标题：

$('*').click(function (e) {
    document.title = e.target.tagName + '#' + e.target.id + '.' + e.target.className;
});

---

我认为问题在于CSS。从

#largeview

中删除了

z-index:-1

，我捕获了所有点击。尝试修改

common.css

（这是首选）或通过Sudhir将代码编辑为（编辑了一点）：

---

我认为问题在于CSS。从

#largeview

中删除了

z-index:-1

，我捕获了所有点击。尝试修改

common.css

（这是首选）或通过Sudhir将代码编辑为（编辑了一点）：

---

您是否向click方法添加了一个警报，以查看它是否确实被击中？当我将整个内容拉入文档时，我尝试了这个方法。准备就绪，它会自动单击它，以便在页面加载时发出警报。我刚刚在它现在所在的位置尝试了它，它循环了一个。自动单击？您是否向单击方法添加了一个警报，以查看它是否确实被击中？我在将整个内容拉到文档中时尝试了这个方法。准备好了，它会自动单击它，以便在页面加载时发出警报。我刚刚试过它现在的位置，它循环了一个。自动点击？啊！那很好用！（很明显，这整件事我都不熟悉）。现在我的下一个问题是，似乎有一段时间介于#largeview进入视图和单击它使其离开视图之间。知道为什么吗？我不认为这是一个时间间隔，当你可以点击它。我认为是什么原因导致jQuery在单击后将关闭动画延迟几秒钟，尝试单击一次并等待几秒钟。我不知道是什么原因造成的。您可能希望更改

click（）

方法中的一些代码，以使用

$（this）

引用单击的对象，而不是重复使用选择器来尝试定位正确的对象。稍后您会感到困惑。再想一想，到目前为止，您的代码中只有一个地方可以更改为

$（this）

，但请记住这一点，以备以后使用。嗯。我会再仔细研究一下延迟的问题。如果一个用户试图快速地点击它，它就会变得非常糟糕。我不使用$（这个）的唯一原因是我想把整个网格移过去。不过，我可以用（这个）来扩大视野。再次感谢！如果您仍然存在延迟问题，请使用Honneykeepa posted代码，以便

click

事件在开始时连接，而不是像现在一样完成动画制作。啊！那很好用！（很明显，这整件事我都不熟悉）。现在我的下一个问题是，似乎有一段时间介于#largeview进入视图和单击它使其离开视图之间。知道为什么吗？我不认为这是一个时间间隔，当你可以点击它。我认为是什么原因导致jQuery在单击后将关闭动画延迟几秒钟，尝试单击一次并等待几秒钟。我不知道是什么原因造成的。您可能希望更改

click（）

方法中的一些代码，以使用

$（this）

引用单击的对象，而不是重复使用选择器来尝试定位正确的对象。稍后您会感到困惑。再想一想，到目前为止，您的代码中只有一个地方可以更改为

$（this）

，但请记住这一点，以备以后使用。嗯。我会再仔细研究一下延迟的问题。如果一个用户试图快速地点击它，它就会变得非常糟糕。我不使用$（这个）的唯一原因是我想把整个网格移过去。不过，我可以用（这个）来扩大视野。再次感谢！如果您仍然存在延迟问题，请使用Honneykeepa posted代码，以便

click

事件在开始时连接，而不是像现在一样完成动画制作。是的，z-ind