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>

source

然而，当将这个标记复制到另一个页面时（我希望它位于页面的不同部分），我得到一个未被捕获的“对象[对象对象]没有方法'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>

DO

<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>

jQuery元素不一致地访问函数

1 个答案: