Question

我正在尝试添加下一个jquery脚本：jsfiddle example

但是，我只得到li的静态列表，而不是在jsfiddle示例中淡入列表。

我正在使用“underscores.me”框架，我尝试将脚本添加到“customizer.js”文件中，我还尝试将脚本添加到页面中，有一次我尝试在ul标签上方，以及其他时间我尝试在ul标签下 - 但没有，我仍然得到li的静态列表。

在我的网站的源代码中，我看到：

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

那么......为什么列表不像示例一样淡出？

Answer 1

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

Answer 2

解决方案：

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

在wordpress页面上使用jquery的最佳方法是在它之前添加JQuery，并使用（document）.ready，而不是$ mark。在这个例子中，在答案中，我正在使用其他脚本然后我添加到我的问题的脚本，但它的想法相同。

wordpress页面上的Jquery功能 - 无法正常工作

2 个答案: