Javascript 在documentready中包装一组函数

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

<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>

$（'.side\u drawer\u face'）。单击（函数（）{
if（$（'side#u drawer'）.css（“left”）
$（document）.ready（function（）{
$（'.side\u drawer\u face'）。单击（函数（）{
如果（$（'#side_drawer'）.css（“left”）那么…为什么不将函数包装在document.ready事件中？我不确定您的问题是什么。理论上，脚本标记中的这段代码应该已经包含在
$（document）.ready（function（）{…}）中了
因为它使用jQuery。另外，为什么要使用jQuery选择器和
document.getElementById
？看起来很奇怪。因为从符号上讲，我不确定它是否像$（document.ready）那么简单（function（）{my functions…}）为什么不试试看呢？我怀疑它会解决你的问题。你是对的，我应该先试试。出于某种原因，我认为它会比这更复杂。
$(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;
                        }); 

});