jquery - 如何修复 laravel/blade/jQuery/Bootstrap 项目中包括 autoNumeric 的错误？

Question

我尝试从以下位置安装 autoNumeric https://www.jqueryscript.net/demo/Easy-Numbers-Currency-Formatting-Plugin-autoNumeric/

在我的 laravel 5.7/blade/jQuery v3.3.1/Bootstrap v4.1.2 应用程序中，并且在我的 Blade 表单中我想使用 autoNumeric我添加了对 AutoNumeric.js 文件的引用:

...
@endsection

@section('scripts')

    <link rel="stylesheet" href="{{ asset('/css/select2.min.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ asset('/css/select2-bootstrap.min.css') }}" type="text/css">
    <script src="{{ asset('js/select2.full.min.js') }}"></script>

    <script src="{{ asset('js/AutoNumeric/AutoNumeric.js') }}"></script>

    <script src="{{ asset('js/formfile.js') }}{{  "?dt=".time()  }}"></script>
...

我将 8 个文件从上传的 zip 文件的/autoNumeric-master/src 上传到/public/js/AutoNumeric 子目录

当 jquery 启动时，我添加了一行:

$('#selling_range').autoNumeric('init');

我得到了错误:

Uncaught SyntaxError: Unexpected identifier

然后单击错误，我会看到下一个错误代码:

/image/QmPEx.jpg

包含该库的方式是否错误，哪个是有效的？

更新2:我尝试将声明修改为:

new AutoNumeric( '#selling_range', null );

但无论如何我得到了错误:

AutoNumeric.js:49 Uncaught SyntaxError: Unexpected identifier

并且在控制台中错误指向行:

//TODO Prevent having to enter relative path in the js files (ie. using `./AutoNumericHelper` instead of just `AutoNumericHelper`) (cf. http://moduscreate.com/es6-es2015-import-no-relative-path-webpack/)
import AutoNumericHelper from './AutoNumericHelper';
import AutoNumericEnum from './AutoNumericEnum';

如上面我的打印屏幕所示。如何解决？

提前致谢!

Answer 1

您必须使用以下结构才能初始化 AutoNumeric 对象。

new AutoNumeric('#selling_range', {options});

其中选项可以为空，也可以为库中包含的任何选项。现在，如果您想遍历一个元素列表并为每个元素初始化一个 AutoNumeric 对象，您可以执行类似于下面的代码的操作。

$('.elements').each(function() {
    new AutoNumeric(this, {options});
});

为了使其正常工作，您需要使用以下版本。此外，无需导入 AutoNumericHelper 或 AutoNumericEnum 即可正常工作。

<script src="https://cdn.jsdelivr.net/npm/autonumeric@4.1.0"></script>