爲什麼這個jQuery在Codeigniter中不起作用？

這個jQuery已經在html網站上正確測試過了，現在我需要在Codeigniter設置上使用它。爲什麼這個jQuery在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採取了這個想法。那麼爲什麼滾動下所有已經加載的項目都沒有顯示？

來源

2015-02-06 NineCattoRules

你正在加載或使用jQuery嗎？我很確定這與jquery或codeigniter無關。 – 2015-02-06 18:27:24

@KaiQing我沒有任何錯誤 – NineCattoRules 2015-02-06 18:28:05

好吧，所以開始扔在那裏的一些console.log（）行，並找出它不在做什麼 – 2015-02-06 18:28:50

從你的代碼（頭部和身體），我沒有發現任何包括jquery js文件。加入類似這樣的東西，

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

來源

2015-02-06 18:28:22 user86745458

這是一條評論，而不是一個答案。你應該刪除之前，你得到downvoted – 2015-02-06 18:29:27

這是一個答案，因爲他是正確的，OP沒有包括jQuery庫。 – 2015-02-06 18:33:11

爲什麼這個jQuery在Codeigniter中不起作用？

回答

相關問題