2013-12-21 59 views
1

以下视图给我“对象不支持道具或方法jCarouselLite”。我有一个几乎相同的页面使用纯HTML工作。我是否正确加载JavaScript?使用MVC Razor加载JavaScript

@using System.Web.Script.Services 
@{ 
    ViewBag.Title = "Home Page"; 
} 

<script src="@Url.Content("~/Scripts/jquery-2.0.3.js")"></script> 
<script src="@Url.Content("/Scripts/jcarousellite_1.0.2.js")"></script> 

<script type="text/javascript"> 
    $(function() { 
     // Add Carousel plugin to rotate images 
     $(".anyClass").jCarouselLite({ 
      visible: 1, 
      auto: 3000, 
      speed: 800, 
      btnNext: ".next", 
      btnPrev: ".prev" 
     }); 

    }); 
</script> 

<button class="prev"><<</button> 
<button class="next">>></button> 
<div class="anyClass"> 
    <ul> 
     <li><img src="/gallery/slide-1.jpg" width="250" height="150"></li> 
     <li><img src="/gallery/slide-2.jpg" width="250" height="150"></li> 
     <li><img src="/gallery/slide-3.jpg" width="250" height="150"></li> 
    </ul> 
</div> 
+0

我想你已经在下面得到了答案。我想告诉你另外一个提示。它始终将您的自定义脚本添加到一个包中。这将使Shared Layout看起来非常干净。 –

+0

什么版本的MVC? –

回答

3

可能是你的jcarousellite jquery插件没有加载。一个可能的原因是,它没有〜登入

<script src="@Url.Content("/Scripts/jcarousellite_1.0.2.js")"></script> 

它应该是这样的:

<script src="@Url.Content("~/Scripts/jcarousellite_1.0.2.js")"></script> 

如果您的网页没有位于站点的根目录的话,就不会找到它。

您可以在浏览器中检查开发人员工具,JQuery的网址是什么以及jcarousellite插件是什么。我想他们会有所不同。

0
@using System.Web.Script.Services 
@{ 
    ViewBag.Title = "Home Page"; 
} 

<script src="@Url.Content("~/Scripts/jquery-2.0.3.js")"></script> 
<script src="@Url.Content("/Scripts/jcarousellite_1.0.2.js")"></script> 

    enter code here 

<script type="text/javascript"> 
    $(function() { 
     // Add Carousel plugin to rotate images 
     $(".anyClass").jCarouselLite({ 
      visible: 1, 
      auto: 3000, 
      speed: 800, 
      btnNext: ".next", 
      btnPrev: ".prev" 
     }); 

    }); 
</script> 

<button class="prev"><<</button> 
<button class="next">>></button> 
<div class="anyClass"> 
    <ul> 
     <li><img src="/gallery/slide-1.jpg" width="250" height="150"></li> 
     <li><img src="/gallery/slide-2.jpg" width="250" height="150"></li> 
     <li><img src="/gallery/slide-3.jpg" width="250" height="150"></li> 
    </ul> 
</div> 
+0

虽然这段代码可能会回答这个问题,但提供关于如何解决问题和/或为什么解决问题的额外上下文会提高答案的长期价值。 –

相关问题