0
海蘭所有，Jquery無法找到類的圖像？
這可能是一些檸simples和愚蠢，但我沒有看到它...
我有一個幻燈片和退出的菜單。我有2張圖片（左側1張，右側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>
腳本看起來像這樣（的changeArrow FUNC應該改變圖像的SRC）：
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
當我在Chrome控制檯檢查$('.navArrow')我得到空回...
因此，似乎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>© 2013 WeProgram</strong> -->
</body></html>
提供的代碼似乎可行。有時候隔離代碼中有問題的部分是有道理的。 http://jsfiddle.net – Joonas 2013-04-10 06:37:57
我會檢查呈現的html源代碼（而不是php模板）以確保一切都是預期的。仔細檢查你是否包含jquery。 – UpTheCreek 2013-04-10 06:41:18
謝謝你的回覆。我知道它應該工作（我在jsfiddle中測試它：D），但它不起作用。我將Jquery作爲第一個腳本包含在內... – Mathlight 2013-04-10 06:52:08