0

应该循环的图像只是彼此叠放。截图在这里

在我的（非常简单的）应用程序中，我有一个View名为Index.cshtml. 我想在我的 PHP 应用程序中使用过的这个页面使用jquery Cycle 插件。下面是我_Layout.cshtml的相关代码

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render(Url.Content("~/Scripts/cycle.js")) // I added this line.
    @Scripts.Render("~/bundles/modernizr")

插件文件(cycle.js)位于Scripts基本项目布局生成的文件夹中。下面是我如何使用它。以下代码也在_Layout.cshtml（此处仅评论）。

<script type="text/javascript">
    $(document).ready(function () {
        alert('test1');   //this is 'alerted'
        $('.images').cycle({
            fx: 'fade',
            speed: 2000
        });
        alert('test2!'); //this is NOT 'alerted'
    });
</script>

当我在浏览器中请求页面后查看源代码时，我得到了这个：

<title>Asp.Net MVC 4 Hello World App</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/cycle.js"></script>
<script src="/Scripts/modernizr-2.5.3.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        alert('test1'); 
        $('.images').cycle({
            fx: 'fade',
            speed: 2000
        });
        alert('test12');
    });
</script>
</head>
<body>
...
</html>

这是图像的容器：

        <div class="images" id="images">
            <img src="@Url.Content("../Images/image1.jpg")" alt="page image" />
            <img src="@Url.Content("../Images/image2.jpg")" alt="page image" />
            <img src="@Url.Content("../Images/image3.jpg")" alt="page image" />
            <img src="@Url.Content("../Images/image4.jpg")" alt="page image" />
        </div>

因此，文件已成功加载。我相信问题是如何$(document).ready()工作。因为我之前放置的任何代码.cycle()都可以工作，但之后没有任何工作。

4

3 回答 3

2

经过一些（更多）搜索后，我解决了这个问题。不知何故，jquery 被加载了两次。在循环插件文件之前一次，在它之后的另一个。此链接有助于发现问题，特别redndahead是 的评论。

我打开 Firebug 控制台并观察到 ​​jQuery 确实被加载了两次。_Layout.cshtml我从标签下的页面中删除了以下行<body>，现在插件工作正常。

 @Scripts.Render("~/bundles/jquery")

这个 SO question对于那些想知道是什么的人非常有帮助bundles。感谢大家的回复。

于 2012-10-20T11:11:22.747 回答
0

这可能有几个原因，但在许多情况下最常见的解决方案是：携带

@Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false)

如果你懂土耳其语，你可以查看这篇文章了解更多信息

http://ogrenmeliyim.com/mvc-4-de-jquery-tanimlanmasi/

于 2013-01-13T16:20:28.107 回答
-1 
<html>
<head>
<script 

 src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

</script>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("p").click(function () {
            $(this).hide();
        });
    });
</script>
</head>
<body>

<p>When you click on this paragraph , it will hide.</p>


</body>
</html>
于 2015-03-16T10:56:48.313 回答