Question

我正在使用2个JS块。一个是我的HTML的内部。它处理触摸功能。另一个是外部文件，它是一个内容滑块。基本上我想使用touchevents控制滑块并移动到上一张/下一张幻灯片，具体取决于用户在移动设备上滑动的方向，但桌面上有更多传统控件。是否可以从我的内部代码块调用外部文件中的函数。

HTML文件

<html>
<head>
<script type="text/javascript" src="js/externalfile.js"></script>
<script>
... lots of code for touchevents ....

function processingRoutine() {

    if ( swipeDirection == 'left' ) {
        // Function below is in external file
        previous();

    } else if ( swipeDirection == 'right' ) {
        // Function below is in external file
        next();

    }
</script>
</head>
<body>
Some HTML code
</body>

外部JS文件

(function($) {

...  Functionality to work slider ...

    // load the next slide
    // These are the functions I am trying to call from above.
function next() {
    goToAndPause(counter+1);
};

// load the previous slide
function previous() {
    goToAndPause(counter-1);
};

})(jQuery);

是否有一种简单的方法可以做到这一点，或者是否已经内置了此功能的旋转器？

Answer 1

滑块必须以某种方式进行实例化，你可以引用它，即使滑块工作在你可能调用的$('.mySlider').slider();之类的第一个位置如果你改变了 window.mySlider = $('.mySlider').slider(); 然后，您可以在“内部”代码中调用mySlider.next()或类似内容。

Answer 2

为什么不将代码解压缩到外部js文件中？我没有看到任何理由你真的需要将它嵌入脚本标签中，一般来说我认为这可能是一个糟糕的架构决策。

第二个想法，您也可以通过声明一个全局变量并访问它来实现它，尽管这不是很好的做法。

Answer 3

如果您不介意编辑插件，可以使用jQuery的事件API。

// external file

(function($) {

    ....

    $(window).on('slider:next', next);

    $(window).on('slider:previous', previous);

})(jQuery);


// inline js (this should really live in its own file, too)

function processingRoutine () {

    if ( swipeDirection === 'left' ) {

        $(window).trigger('slider:next');

    } else if ( swipeDirection === 'right' ) {

        $(window).trigger('slider:previous');

    }

}

从内部JS代码块调用外部JS函数

3 个答案: