Question

我试图在同一页面上运行两个jQuery，我发现它只能在任何时候运行其中一个。

是否可以加入它们以便两者都能运行？

以下是我要加入的两个功能：

功能1

jQuery(document).ready(function () {
    $('#countdown_dashboard1').countDown({
        queue: false,
        targetDate: {
            'day': 9,
                'month': 1,
                'year': 2016,
                'hour': 11,
                'min': 0,
                'sec': 0
        }
    });
});

功能2

<script id="addJS">
    jQuery(document).ready(function($) {
        jQuery.rsCSS3Easing.easeOutBack = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)';
        $('#slider-with-blocks-1').royalSlider({
            queue: false,
            arrowsNav: true,
            arrowsNavAutoHide: false,
            fadeinLoadedSlide: false,
            controlNavigationSpacing: 0,
            controlNavigation: 'bullets',
            imageScaleMode: 'none',
            imageAlignCenter: false,
            blockLoop: true,
            loop: true,
            numImagesToPreload: 2,
            transitionType: 'move',
            keyboardNavEnabled: true,
            autoPlay: {
                enabled: true,
                delay: 8000,
                pauseOnHover: false,
                stopAtAction: false
            },
            block: {
                delay: 200
            }
        });
    });
</script>

Answer 1

jQuery(document).ready()构造只是将事件处理程序注册到ondomready对象的document事件。（这些螺母和螺栓比这更微妙，但这基本上是准确的。）

并且（对于此事件或任何其他事件），您可以根据需要注册任意数量的处理程序。

所以，是的 - 你可以做你想要的。

检查JavaScript控制台，看看是否有任何运行时错误。

Answer 2

jQuery(document).ready(function () {});只是在文档被认为准备就绪时推迟执行任何包装。

来自文档（http://learn.jquery.com/using-jquery-core/document-ready/）：

$（document）.ready（）中包含的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码时才会运行。

你想要的是：

jQuery(document).ready(function () {
    $('#countdown_dashboard1').countDown({
        queue: false,
        targetDate: {
            'day': 9,
                'month': 1,
                'year': 2016,
                'hour': 11,
                'min': 0,
                'sec': 0
        }
    });

 jQuery.rsCSS3Easing.easeOutBack = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)';

 $('#slider-with-blocks-1').royalSlider({
            queue: false,
            arrowsNav: true,
            arrowsNavAutoHide: false,
            fadeinLoadedSlide: false,
            controlNavigationSpacing: 0,
            controlNavigation: 'bullets',
            imageScaleMode: 'none',
            imageAlignCenter: false,
            blockLoop: true,
            loop: true,
            numImagesToPreload: 2,
            transitionType: 'move',
            keyboardNavEnabled: true,
            autoPlay: {
                enabled: true,
                delay: 8000,
                pauseOnHover: false,
                stopAtAction: false
            },
            block: {
                delay: 200
            }
  });
});

多个JQuery $（文档）.ready函数

2 个答案: