Question

Hy all，

这可能是简单而愚蠢的东西，但我没有看到......

我有一个可以滑入和滑出的菜单。我有2个图像（左边1个，右边右边）控制滑动。我想在滑动完成后，图像src改变......

我已经为图片提供了一个名为navArrow

的类

<div id="nav2">
                <span id="adminMenuWrapperButtonLeft">
                    <img onClick="myHeight.toggle();changeArrow();" src="<?php echo site_url('media/img/system/'); ?>/SlideArrowBottom.png"  width="40px" class="navArrow" />
                </span>
                <span id="adminMenuWrapperButtonRight">
                    <img onClick="myHeight.toggle();changeArrow();" src="<?php echo site_url('media/img/system/'); ?>/SlideArrowBottom.png"  width="40px" class="navArrow" />
                </span>
                <div class="clear"></div>
            </div>

脚本看起来像这样（应该更改图像的src的changeArrow函数）：

var typeArrow = 1;
                function changeArrow(){
                    if(typeArrow == 1){
                        $('.navArrow').each(function(){
                            $(this).attr('src', "<?php echo site_url('media/img/system/'); ?>/SlideArrowTop.png");
                        });
                        typeArrow = 0;
                    } else{
                        $('.navArrow').each(function(){
                            $(this).attr('src', "<?php echo site_url('media/img/system/'); ?>/SlideArrowBottom.png");
                        });
                        typeArrow = 1
                    }
                }

但我收到错误消息：Uncaught TypeError: Cannot call method 'each' of null

当我使用$('.navArrow')检查chrome控制台时，我会返回null ...

所以看来Jquery找不到我的班级？我忘记了什么？

希望很快能听到你们的意见：D

EDIT1 完整（渲染）HTML看起来像这样：

<html><head>
        <title>Toegang Verkrijgen           - Administrator - CMS WeProgram</title>
        <meta name="keywords" content="">
        <meta name="description" content="">
        <link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
        <script src="http://cms.local/jscript/jquery-1.9.1.min.js"></script><style type="text/css"></style>
        <link rel="stylesheet" href="http://cms.local/css/admin/jquery-ui.css">
        <script src="http://cms.local/jscript/jquery-ui.js"></script>
        <script src="http://cms.local/jscript/nav.js"></script>
        <script src="http://cms.local/jscript/prototype.lite.js"></script>
        <script src="http://cms.local/jscript/moo.fx.js"></script>
        <!-- <link href='http://fonts.googleapis.com/css?family=Tauri&subset=latin,latin-ext' rel='stylesheet' type='text/css'> -->
        <link rel="stylesheet" type="text/css" href="http://cms.local/css/admin/mainStyle.css">
        <link rel="stylesheet" type="text/css" href="http://cms.local/css/admin/adminMenu.css">
            </head>
    <body>
        <div id="mainWrapper">
            <div id="nav" style="overflow: hidden; height: 0px;">
                <div id="nav_inner">
                    <script>
                        document.write(create_menu('http://cms.local/'));
                    </script><table cellpadding="0" cellspaceing="0" border="0" style="width:98%"><tbody><tr><td class="td" valign="top"><ul><li><a href="http://cms.local/index.html">User Guide Home</a></li><li><a href="http://cms.local/toc.html">Table of Contents Page</a></li></ul><h3>Basic Info</h3><ul><li><a href="http://cms.local/general/requirements.html">Server Requirements</a></li><li><a href="http://cms.local/license.html">License Agreement</a></li><li><a href="http://cms.local/changelog.html">Change Log</a></li><li><a href="http://cms.local/general/credits.html">Credits</a></li></ul><h3>Installation</h3><ul><li><a href="http://cms.local/installation/downloads.html">Downloading CodeIgniter</a></li><li><a href="http://cms.local/installation/index.html">Installation Instructions</a></li><li><a href="http://cms.local/installation/upgrading.html">Upgrading from a Previous Version</a></li><li><a href="http://cms.local/installation/troubleshooting.html">Troubleshooting</a></li></ul><h3>Introduction</h3><ul><li><a href="http://cms.local/overview/getting_started.html">Getting Started</a></li><li><a href="http://cms.local/overview/at_a_glance.html">CodeIgniter at a Glance</a></li><li><a href="http://cms.local/overview/cheatsheets.html">CodeIgniter Cheatsheets</a></li><li><a href="http://cms.local/overview/features.html">Supported Features</a></li><li><a href="http://cms.local/overview/appflow.html">Application Flow Chart</a></li><li><a href="http://cms.local/overview/mvc.html">Model-View-Controller</a></li><li><a href="http://cms.local/overview/goals.html">Architectural Goals</a></li></ul><h3>Tutorial</h3><ul><li><a href="http://cms.local/tutorial/index.html">Introduction</a></li><li><a href="http://cms.local/tutorial/static_pages.html">Static pages</a></li><li><a href="http://cms.local/tutorial/news_section.html">News section</a></li><li><a href="http://cms.local/tutorial/create_news_items.html">Create news items</a></li><li><a href="http://cms.local/tutorial/conclusion.html">Conclusion</a></li></ul></td><td class="td_sep" valign="top"><h3>General Topics</h3><ul><li><a href="http://cms.local/general/urls.html">CodeIgniter URLs</a></li><li><a href="http://cms.local/general/controllers.html">Controllers</a></li><li><a href="http://cms.local/general/reserved_names.html">Reserved Names</a></li><li><a href="http://cms.local/general/views.html">Views</a></li><li><a href="http://cms.local/general/models.html">Models</a></li><li><a href="http://cms.local/general/helpers.html">Helpers</a></li><li><a href="http://cms.local/general/libraries.html">Using CodeIgniter Libraries</a></li><li><a href="http://cms.local/general/creating_libraries.html">Creating Your Own Libraries</a></li><li><a href="http://cms.local/general/drivers.html">Using CodeIgniter Drivers</a></li><li><a href="http://cms.local/general/creating_drivers.html">Creating Your Own Drivers</a></li><li><a href="http://cms.local/general/core_classes.html">Creating Core Classes</a></li><li><a href="http://cms.local/general/hooks.html">Hooks - Extending the Core</a></li><li><a href="http://cms.local/general/autoloader.html">Auto-loading Resources</a></li><li><a href="http://cms.local/general/common_functions.html">Common Functions</a></li><li><a href="http://cms.local/general/routing.html">URI Routing</a></li><li><a href="http://cms.local/general/errors.html">Error Handling</a></li><li><a href="http://cms.local/general/caching.html">Caching</a></li><li><a href="http://cms.local/general/profiling.html">Profiling Your Application</a></li><li><a href="http://cms.local/general/cli.html">Running via the CLI</a></li><li><a href="http://cms.local/general/managing_apps.html">Managing Applications</a></li><li><a href="http://cms.local/general/environments.html">Handling Multiple Environments</a></li><li><a href="http://cms.local/general/alternative_php.html">Alternative PHP Syntax</a></li><li><a href="http://cms.local/general/security.html">Security</a></li><li><a href="http://cms.local/general/styleguide.html">PHP Style Guide</a></li><li><a href="http://cms.local/doc_style/index.html">Writing Documentation</a></li></ul><h3>Additional Resources</h3><ul><li><a href="http://codeigniter.com/forums/">Community Forums</a></li><li><a href="http://codeigniter.com/wiki/">Community Wiki</a></li></ul></td><td class="td_sep" valign="top"><h3>Class Reference</h3><ul><li><a href="http://cms.local/libraries/benchmark.html">Benchmarking Class</a></li><li><a href="http://cms.local/libraries/calendar.html">Calendar Class</a></li><li><a href="http://cms.local/libraries/cart.html">Cart Class</a></li><li><a href="http://cms.local/libraries/config.html">Config Class</a></li><li><a href="http://cms.local/libraries/email.html">Email Class</a></li><li><a href="http://cms.local/libraries/encryption.html">Encryption Class</a></li><li><a href="http://cms.local/libraries/file_uploading.html">File Uploading Class</a></li><li><a href="http://cms.local/libraries/form_validation.html">Form Validation Class</a></li><li><a href="http://cms.local/libraries/ftp.html">FTP Class</a></li><li><a href="http://cms.local/libraries/table.html">HTML Table Class</a></li><li><a href="http://cms.local/libraries/image_lib.html">Image Manipulation Class</a></li><li><a href="http://cms.local/libraries/input.html">Input Class</a></li><li><a href="http://cms.local/libraries/javascript.html">Javascript Class</a></li><li><a href="http://cms.local/libraries/loader.html">Loader Class</a></li><li><a href="http://cms.local/libraries/language.html">Language Class</a></li><li><a href="http://cms.local/libraries/migration.html">Migration Class</a></li><li><a href="http://cms.local/libraries/output.html">Output Class</a></li><li><a href="http://cms.local/libraries/pagination.html">Pagination Class</a></li><li><a href="http://cms.local/libraries/security.html">Security Class</a></li><li><a href="http://cms.local/libraries/sessions.html">Session Class</a></li><li><a href="http://cms.local/libraries/trackback.html">Trackback Class</a></li><li><a href="http://cms.local/libraries/parser.html">Template Parser Class</a></li><li><a href="http://cms.local/libraries/typography.html">Typography Class</a></li><li><a href="http://cms.local/libraries/unit_testing.html">Unit Testing Class</a></li><li><a href="http://cms.local/libraries/uri.html">URI Class</a></li><li><a href="http://cms.local/libraries/user_agent.html">User Agent Class</a></li><li><a href="http://cms.local/libraries/xmlrpc.html">XML-RPC Class</a></li><li><a href="http://cms.local/libraries/zip.html">Zip Encoding Class</a></li></ul></td><td class="td_sep" valign="top"><h3>Driver Reference</h3><ul><li><a href="http://cms.local/libraries/caching.html">Caching Class</a></li><li><a href="http://cms.local/database/index.html">Database Class</a></li><li><a href="http://cms.local/libraries/javascript.html">Javascript Class</a></li></ul><h3>Helper Reference</h3><ul><li><a href="http://cms.local/helpers/array_helper.html">Array Helper</a></li><li><a href="http://cms.local/helpers/captcha_helper.html">CAPTCHA Helper</a></li><li><a href="http://cms.local/helpers/cookie_helper.html">Cookie Helper</a></li><li><a href="http://cms.local/helpers/date_helper.html">Date Helper</a></li><li><a href="http://cms.local/helpers/directory_helper.html">Directory Helper</a></li><li><a href="http://cms.local/helpers/download_helper.html">Download Helper</a></li><li><a href="http://cms.local/helpers/email_helper.html">Email Helper</a></li><li><a href="http://cms.local/helpers/file_helper.html">File Helper</a></li><li><a href="http://cms.local/helpers/form_helper.html">Form Helper</a></li><li><a href="http://cms.local/helpers/html_helper.html">HTML Helper</a></li><li><a href="http://cms.local/helpers/inflector_helper.html">Inflector Helper</a></li><li><a href="http://cms.local/helpers/language_helper.html">Language Helper</a></li><li><a href="http://cms.local/helpers/number_helper.html">Number Helper</a></li><li><a href="http://cms.local/helpers/path_helper.html">Path Helper</a></li><li><a href="http://cms.local/helpers/security_helper.html">Security Helper</a></li><li><a href="http://cms.local/helpers/smiley_helper.html">Smiley Helper</a></li><li><a href="http://cms.local/helpers/string_helper.html">String Helper</a></li><li><a href="http://cms.local/helpers/text_helper.html">Text Helper</a></li><li><a href="http://cms.local/helpers/typography_helper.html">Typography Helper</a></li><li><a href="http://cms.local/helpers/url_helper.html">URL Helper</a></li><li><a href="http://cms.local/helpers/xml_helper.html">XML Helper</a></li></ul></td></tr></tbody></table>
                </div>
            </div>
            <div id="nav2">
                <span id="adminMenuWrapperButtonLeft">
                    <img onclick="myHeight.toggle();changeArrow();" src="http://cms.local/media/img/system/SlideArrowBottom.png" width="40px" class="navArrow">
                </span>
                <span id="adminMenuWrapperButtonRight">
                    <img onclick="myHeight.toggle();changeArrow();" src="http://cms.local/media/img/system/SlideArrowBottom.png" width="40px" class="navArrow">
                </span>
                <div class="clear"></div>
            </div>
            <script>
                window.onload = function() {
                    myHeight = new fx.Height('nav', {
                        duration : 400
                    });
                    myHeight.hide();
                }
                var typeArrow = 1;
                function changeArrow(){
                    if(typeArrow == 1){
                        $('.navArrow').each(function(){
                            $(this).attr('src', "http://cms.local/media/img/system/SlideArrowTop.png");
                        });
                        typeArrow = 0;
                    } else{
                        $('.navArrow').each(function(){
                            $(this).attr('src', "http://cms.local/media/img/system/SlideArrowBottom.png");
                        });
                        typeArrow = 1
                    }
                }
            </script>

            <div id="adminMenuWrapper">

                <span id="adminMenuWrapperButton"><img onclick="slideMenu();" src="http://cms.local/media/img/system/SlideArrowRightOver.png" width="25px" id="adminMenuWrapperButtonImg"></span>
                <script>
                                        function slideMenu() {
                                            var currentWidth = $('#adminMenuWrapper').width();
                                            if (currentWidth < 149) {
                                                $('#adminMenuWrapper').animate({
                                                    'width' : '150px'   // to move it towards the right.
                                                }, 1000, function() {
                                                    $('.adminMenuWrapperText').toggle();
                                                    $('#adminMenuWrapperButtonImg').attr('src', "http://cms.local/media/img/system/SlideArrowLeftOver.png");
                                                });
                                            } else {
                                                $('.adminMenuWrapperText').toggle();
                                                $('#adminMenuWrapper').animate({
                                                    'width' : '50px'    // to move it towards the left.
                                                }, 1000, function() {
                                                    $('#adminMenuWrapperButtonImg').attr('src', "http://cms.local/media/img/system/SlideArrowRightOver.png");
                                                });
                                            }
                                        }
                </script>
                <div class="clear"></div>
                <br>
                <a href="http://cms.local/admin" class="linkAdminMenu"><span class="adminMenuWrapperText">Dashboad</span> <img width="50px" src="http://cms.local/media/img/system/dashboard.png" style="vertical-align: middle;"></a>
                <br><br>
                <a href="http://cms.local/admin/pages" class="linkAdminMenu"><span class="adminMenuWrapperText">Pagina′s</span> <img width="50px" src="http://cms.local/media/img/system/contentIcon.png" style="vertical-align: middle;"></a>
                <br>
            </div>
            <div id="adminContentWrapper">
                <div id="adminHeader">
                    <div id="adminHeaderLeft">
                        <h3>Administrator</h3>
                    </div>
                    <div id="adminHeaderRight">
                        Aangemeld als WeProgram | <a href="http://cms.local/" target="_tab">Website</a> | <a href="http://cms.local/admin/logout">Afmelden</a>
                    </div>
                    <div class="clear"></div>
                </div>
                <!-- <div id="adminMainContentWrapper" class="block-shadow block-header">
                    <span class="adminMainContentHeaderItem">
                        Dashboard
                    </span>
                    <span class="adminMainContentHeaderItem">
                        Inhoud
                    </span>
                </div>
                <div id="adminMainContentHeaderSubWrapper" class="arrow_box">
                    Quick Links????:
                </div> -->      <div id="adminMainContentWrapper" class="block-shadow block-header">
    <span class="adminMainContentHeaderItem">
        <a href="http://cms.local/admin/pages" class="linkSecondMenu">Pagina′s</a>
    </span>
    <span class="adminMainContentHeaderItem">
        <a href="http://cms.local/admin/menu" class="linkSecondMenu">Menu</a>
    </span>
</div></div> <div class="clear"></div>
</div>
<!-- <br /><br /><strong>&copy; 2013 WeProgram</strong>  -->


</body></html>

Answer 1

最有可能..

  onclick="myHeight.toggle();changeArrow();"

这个内联javascript调用给你带来问题，因为myHeight可能没有设置..你为什么不在javascript中调用click事件

window.onload = function() {
          myHeight = new fx.Height('nav', {
                    duration : 400
          });
          myHeight.hide();
         var typeArrow = 1; 
         $('.navArrow').click(function(){
              myHeight.toggle()  //here call toggle 
              if(typeArrow == 1){
                    $('.navArrow').each(function(){
                        $(this).attr('src', "http://cms.local/media/img/system/SlideArrowTop.png");
                    });
                    typeArrow = 0;
              } else{
                    $('.navArrow').each(function(){
                        $(this).attr('src', "http://cms.local/media/img/system/SlideArrowBottom.png");
                    });
                    typeArrow = 1
              }
          });
    }

Answer 2

这是一个自我答案，以便将此问题设置为已解决

我已经修好了。 prototype.js覆盖了函数$()。我更改了该函数的名称，并更新了该文件中的函数调用，并且已修复...

Jquery无法用类找到图像？

2 个答案: