Question

这个问题可能更多的是语法问题而不是其他问题。我有一些简单的代码可以控制一些自定义选项卡，这些选项卡在单击时可以在屏幕上显示。在大多数情况下，代码（尤其是动画）按预期工作，并且没有问题。

<script type="text/javascript">
                    $('.side_drawer_face').click(function() {

                            if ($('#side_drawer').css("left") <= "0"){
                                  $('#overlay_div').show();  
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                                  $('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);

                            } else if ($('#side_drawer').css("z-index") == "6000"){
                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                            }   else {
                                      document.getElementById('side_drawer').style.zIndex = 6000;
                                      document.getElementById('side_drawer2').style.zIndex = 5000;

                                }

                        });
                    $('.side_drawer_face2').click(function() {
                                //shows Bio div
                            if ($('#side_drawer2').css("left") <= "0"){
                                  $('#overlay_div').show(); 
                                  document.getElementById('side_drawer2').style.zIndex = 6000;
                                  document.getElementById('side_drawer').style.zIndex = 5000;
                                  $('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);
                            } else if ($('#side_drawer2').css("z-index") == "6000"){
                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);

                            } else {
                                  document.getElementById('side_drawer2').style.zIndex = 6000;
                                  document.getElementById('side_drawer').style.zIndex = 5000;

                            }
                        });
                    $('.clear_overlay').click(function() {

                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                        }); 

                    </script>

我的问题是，在某些浏览器中（以I开头并以E结尾）快速单击选项卡，而其他页面元素正在加载时会导致意外行为。我想要做的是用文档就绪语句包装整个脚本，这样在页面上的所有内容都加载之前，不能执行任何函数。（该脚本已经位于html主体的底部）

Answer 1

$(document).ready(function() {
                     $('.side_drawer_face').click(function() {

                            if ($('#side_drawer').css("left") <= "0"){
                                  $('#overlay_div').show();  
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                                  $('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);

                            } else if ($('#side_drawer').css("z-index") == "6000"){
                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                            }   else {
                                      document.getElementById('side_drawer').style.zIndex = 6000;
                                      document.getElementById('side_drawer2').style.zIndex = 5000;

                                }

                        });
                    $('.side_drawer_face2').click(function() {
                                //shows Bio div
                            if ($('#side_drawer2').css("left") <= "0"){
                                  $('#overlay_div').show(); 
                                  document.getElementById('side_drawer2').style.zIndex = 6000;
                                  document.getElementById('side_drawer').style.zIndex = 5000;
                                  $('#side_drawer').animate({ opacity: 1.0, left: '+=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '+=406'}, 500);
                            } else if ($('#side_drawer2').css("z-index") == "6000"){
                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);

                            } else {
                                  document.getElementById('side_drawer2').style.zIndex = 6000;
                                  document.getElementById('side_drawer').style.zIndex = 5000;

                            }
                        });
                    $('.clear_overlay').click(function() {

                                  $('#overlay_div').hide();
                                  $('#side_drawer').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  $('#side_drawer2').animate({ opacity: 1.0, left: '-=406'}, 500);
                                  document.getElementById('side_drawer2').style.zIndex = 5000;
                                  document.getElementById('side_drawer').style.zIndex = 6000;
                        }); 

});

Nick和Matt的评论是正确的 - 语法非常简单，只需绑定ready函数中的事件处理程序

将一堆函数包装在文档中

1 个答案: