2014-03-04 133 views
0

我想旁边添加jQuery脚本:jsfiddle examplejQuery函数 - 不工作

但是,我只得到李的静态列表,而不是淡入列表作为它的的jsfiddle例子。

我正在使用“underscores.me”框架,我试图将脚本添加到“customizer.js”文件中,我也尝试将脚本添加到页面,有一次我试着在ul标签之上,并且其他时间我尝试了下ul标签 - 但没有,我仍然得到李的静态列表。

在我的网站的源代码,我看到:

<script type='text/javascript' src='http://*****/wp-includes/js/jquery/jquery.js?ver=1.10.2'></script> 
<script type='text/javascript' src='http://****/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script> 

所以jQuery的负载好(我编辑在这里* *标志,而不是网站的网址)

我的代码(这些代码是在同一页上):

<script> 
jQuery(document).ready(function showTheList() { 
var i = 1; 
function showOne() { 
if (i === 1) $('.ul li').hide(); 
$('ul li').eq(i - 1).delay(1000).fadeIn(1000, function() { 
$('ul li').eq(i - 1).fadeOut(100, function() { 
if (++i > 4) i = 1; 
showOne(); 
}); 
}); 
} 
showOne(); 
}); 

</script> 
<ul class='ul'> 
<li>Hello</li> 
<li>Out</li> 
<li>There</li> 
<li>World!</li> 
</ul>   
<script>      
$(document).ready(showTheList()); 
</script> 

那么......为什么列表不像示例那样淡入?

回答

0

您是否在$(document).ready()处理程序中调用showTheList函数?如果你在你的元素准备好之前运行它,它什么都不会做。

+0

嘿谢谢,我编辑了我的问题。我不用jquery很多工作,所以也许我做了一些有趣和错误的事情...检查你是否可以:)谢谢 – Oshrib

+0

你打电话给准备处理程序错误。你需要使用'jQuery(document).ready(function(){//你的代码});'。例如:'$(document).ready(function(){showTheList();});'。此外,您可以从ready handler中删除上层脚本(函数定义),并保持原样。有关详情,请访问http://api.jquery.com/ready/ –

0

解决办法:

 <ul class='aa'> 
      <?php if (have_posts()) : ?> 

      <?php /* Start the Loop */ ?> 

      <?php query_posts('cat=3&orderby=date&order=ASC'); ?> <!-- post from '3' category --> 

      <?php while (have_posts()) : the_post(); ?> 


      <li><a href="<?php the_field('news-link') ?>" rel="nofollow" target="_blank"> <?php the_title(); ?></a></li> 

       <?php endwhile; ?> 

       <?php endif; ?> 
     </ul> 


<script type="text/javascript"> 
function InOut(elem) 
{ 
elem.delay() 
    .fadeIn(1) 
    .delay(100) 
.fadeOut(
      function(){ 
      if(elem.next().length > 0) // if there is a next element 
       {InOut(elem.next());} // use it 
      else 
       {InOut(elem.siblings(':first'));} // if not, then use go back to the first sibling 

      } 
     ); 
} 





jQuery(document).ready(function() { 
jQuery('.aa li').hide(); 
InOut(jQuery('.aa li:first')); 
}); 





</script>  

使用jquery WordPress的页面上,最好的办法是在它之前加入jQuery和使用(文件)。就绪,而不是$大关。在这个例子中,在答案中,我使用了其他脚本,然后是我添加到我的问题的脚本,但它的想法相同。