jQuery元素访问函数的权限不一致

Question

我使用的是Orchard CMS Contoso主题，它带有这个漂亮的内置幻灯片脚本：

<p>
    <script type="text/javascript" src="/Themes/Contoso/Scripts/easySlider.js"></script>
    <script type="text/javascript">
        // <![CDATA[
        $(document).ready(function () {
            $("#slider").easySlider({
                prevText: '',
                nextText: '',
                speed: '1600',
            });
        });
        // ]]>
    </script>
</p>
<div id="slider">
    <ul>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
    </ul>
</div>

源

然而，当将此标记复制到另一个页面中时（我希望它位于页面的不同部分），我会得到一个未捕获的"Object[Object Object]没有方法'easySlider'"异常。

两个页面都可以访问相同的源文件，是否可能是不同的包装元素（它们附带了CSS类）造成的问题？它没有出现在文档中，但我不知道是什么原因导致了这个问题。

这是Site.CSS中的相关CSS（适用于两个页面）

#slider ul, #slider li {
    margin:0;
    padding:0;
    list-style:none;
}
#slider, #slider li { 
    /* 
        define width and height of container element and list item (slide)
        list items must be the same size as the slider area
    */ 
    width:471px;
    height:319px;
    overflow:hidden; 
}

Answer 1

这不是您问题的直接答案，但应该会有所帮助。

1.//由于您使用的是CMS，您的jquery实例"$"可能会被覆盖。使用$.noconflict（）；

2.//正确构建html标记：如果要在同一页面上使用多个滑块，请使用类而不是id，并将所有javascript放在页面底部（连接速度较慢的用户会为此感谢您）。

所以与其写

<div id="slider">
    <ul>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
    </ul>
</div>

进行

<div class="slider">
    <ul>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
        <li><img src="~~~~~" alt="~~~~~" /></li>
    </ul>
</div>

然后，在结束正文标记之前包含所有javascript

<script type="text/javascript" src="/Themes/Contoso/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Themes/Contoso/Scripts/easySlider.js"></script>
    <script type="text/javascript">
        // <![CDATA[
$.noConflict();
  jQuery(document).ready(function($) {
            $(".slider").easySlider({
                prevText: '',
                nextText: '',
                speed: '1600',
            });
        });
        // ]]>
    </script>
</body>
</html>