[英]Anonymous Function/Reference Error with Javascript in Wordpress
I'm having difficulties getting my javascript code to work with my site built in Wordpress. 我很难让我的JavaScript代码与在Wordpress中构建的网站一起使用。 I have a jsfiddle which you can find here: http://jsfiddle.net/sarahk3112/aw5xR/13/
我有一个jsfiddle,您可以在这里找到: http : //jsfiddle.net/sarahk3112/aw5xR/13/
This isn't styled exactly how I want it but shows the desired effect with the slide down/up and toggle between the "portfolio" and "about" links that have sub navigation. 这并不是我想要的样式,而是通过上下滑动并在具有子导航的“作品集”和“关于”链接之间切换来显示所需的效果。 So it works perfectly here but when I implement the same exact code in my Wordpress page template it doesn't work.
因此,它在这里可以完美运行,但是当我在Wordpress页面模板中实现相同的确切代码时,它将无法正常工作。 The Wordpress site is currently in maintenance mode since I need to fix this so I can't point you to a live link there unless absolutely necessary (it's a client site and they're not ready to go live yet).
Wordpress网站目前处于维护模式,因为我需要修复此问题,因此除非绝对必要,否则我无法将您指向该网站的实时链接(这是一个客户端网站,他们还没有准备好上线)。
Here is the error that Safari shows when I click "portfolio": 这是我单击“作品集”时Safari显示的错误:
(anonymous function) - moderndayfloral.com
(匿名函数)-moderndayfloral.com
The error Chrome shows when I click "portfolio": 当我单击“投资组合”时,Chrome显示错误:
Uncaught ReferenceError: slideonlyone is not defined
未被捕获的ReferenceError:未定义slideonlyone
Here is the Javascript code in my functions.js file: 这是我的functions.js文件中的Javascript代码:
jQuery(document).ready(function(){
function slideonlyone(thechosenone) {
$('span[class|="subnav"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
if ($(this).css('display') == 'block') {
$(this).hide(200);
}
else {
$(this).show(200);
}
}
else {
$(this).hide(200);
}
});
}
});
And here is the html code in my page template file: 这是我的页面模板文件中的html代码:
<ul id="hometopnav">
<li><a id="portfolio" href="javascript:slideonlyone('portfolio');" >portfolio</a>
<span id="portfolio" style="display: none;" class="subnav">
<img src="http://moderndayfloral.com/wp-content/themes/moderndayfloral/_/images/whitearrow.png">
<a href="/weddings">weddings</a>
<a href="/events">events</a>
</span>
</li>
<li><a href="/eventdesign">event design</a></li>
<li><a href="/boutique">boutique</a></li>
<li><a id="about" href="javascript:slideonlyone('about');" >about</a>
<span id="about" style="display: none;" class="subnav">
<img src="http://moderndayfloral.com/wp-content/themes/moderndayfloral/_/images/whitearrow.png">
<a href="/philosophy">philosophy</a>
<a href="/services">services</a>
<a href="/jenn">jenn</a>
</span>
</li>
<li><a href="/thanks">thanks</a></li>
<li><a href="/accolades">accolades</a></li>
<li><a href="/blog">blog</a></li>
<li><a href="/contact">contact</a></li>
</ul>
I hope this is enough information to seek assistance. 我希望这是足够的信息以寻求帮助。 I'm caught between a rock and hard place with not being able to make it live so you can see.
我被困在一块岩石和坚硬的地方之间,无法将其变为现实,因此您可以看到。 I know Javascript needs a little extra care when it comes to Wordpress so I appreciate any help that can be offered.
我知道Javascript在涉及Wordpress时需要多加注意,因此,我感谢能提供的任何帮助。 If there is any other info I can provide to help, just let me know!
如果还有其他我可以提供的信息,请告诉我!
Thanks for your time! 谢谢你的时间!
You don't need to wrap a function on document ready, it doesn't have anything to execute as soon as the dom is loaded, and you are checking for wrong display
as show
transforms in inline
display: 您不需要将功能包装在文档上,也不需要在加载dom后立即执行任何功能,并且您可以检查
display
的错误display
如inline
显示中的show
转换:
var jQuery = {};
jQuery = jQuery.noConflict(true);
function slideonlyone(thechosenone) {
jQuery('span').closest('.subnav').each(function(index) {
if (jQuery(this).attr("id") == thechosenone) {
if (jQuery(this).css('display') != 'none') {
jQuery(this).hide(200);
} else {
jQuery(this).show(200);
}
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.