为什么这个 jQuery 在 Codeigniter 中不起作用？答案

【问题标题】：Why this jQuery doesn't work in Codeigniter?为什么这个 jQuery 在 Codeigniter 中不起作用？
【发布时间】：2015-02-06 18:24:12
【问题描述】：

这个 jQuery 已经在 html 网站上正确测试过，现在我需要在 Codeigniter 设置上使用它。

所以我有一个看起来像这样的 php 页面：

    <head>        
        <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/themes/<?php echo $this->config->item("theme"); ?>/normalize.css" type="text/css" />
        <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/themes/<?php echo $this->config->item("theme"); ?>/component.css" type="text/css" />
        <script src="<?php echo base_url(); ?>assets/js/modernizr.custom.js"></script>  
    </head>
        <body>
        <div class="container">
            <!-- Top Navigation -->
            <section class="grid-wrap">
                <ul class="grid swipe-right" id="grid">

            <li><a href="#"><img src="<?php echo base_url(); ?>assets/css/themes/<?php echo $this->config->item("theme"); ?>/images/dummy.png" alt="dummy"><h3>A fantastic title</h3></a></li>
            <!-- etc -->
            </ul>


            </section>

        </div><!-- /container -->
        <script src="<?php echo base_url(); ?>assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/colorfinder-1.1.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/masonry.pkgd.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/gridScrollFx.js"></script>
    <script src="<?php echo base_url(); ?>assets/js/classie.js"></script>
        <script>
            new GridScrollFx( document.getElementById( 'grid' ), {
                viewportFactor : 0.4
            } );
        </script>
    </body>
</html>

我在控制台上没有任何 Javascript 问题，但是当我向下滚动 "GridScrollFx" 时，jQuery 不会将“显示”类添加到列表项中

GridScrollFx.prototype._scrollPage = function() {
        var self = this;
        this.items.forEach( function( item ) {
            if( !classie.has( item.el, 'shown' ) && !classie.has( item.el, 'animate' ) && inViewport( item.el, self.options.viewportFactor ) ) {
                ++self.itemsRenderedCount;

                if( !item.curtain ) {
                    classie.add( item.el, 'shown' );
                    return;
                };

                classie.add( item.el, 'animate' );

                // after animation ends add class shown
                var onEndAnimationFn = function( ev ) {
                    if( support.animations ) {
                        this.removeEventListener( animEndEventName, onEndAnimationFn );
                    }
                    classie.remove( item.el, 'animate' );
                    classie.add( item.el, 'shown' );
                };

                if( support.animations ) {
                    item.curtain.addEventListener( animEndEventName, onEndAnimationFn );
                }
                else {
                    onEndAnimationFn();
                }
            }
        });
        this.didScroll = false;
    }

这是 CSS：

/* Hover effects */
.grid li.shown:hover h3 {
    color: #fff;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

.grid li.shown:hover > a::before {
    border-width: 14px;
    border-color: #2E3444;
}
.grid li.shown img,
.grid li.shown h3 {
    visibility: visible;
}

我从这个tutorial 中获得了这个想法。那么为什么在向下滚动时不显示所有已加载的项目？

【问题讨论】：

你是在加载还是在使用 jquery？我很确定这与 jquery 或 codeigniter 无关。
@KaiQing 我没有任何错误
好的，所以开始往里面扔一些 console.log() 行，看看它没有做什么
@KaiQing 它没有做的是使用 js gridscrollfx 将类“显示”添加到所有已经到位但隐藏的项目
很确定 GridScroll 不是 jQuery 插件...

标签： javascript php jquery twitter-bootstrap codeigniter

【解决方案1】：

从您的代码（头部和正文）中，我没有找到包含任何 jquery js 文件。添加类似的东西，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

【讨论】：

这是评论，不是答案。你应该在被否决之前删除
这是一个答案，因为他是对的，OP没有包含jQuery库。