解决方案（仅针对具体情况）

Question

我用JS编写了一些代码来连接两个选择框，使它们成为范围选择。行为是当您选择下限时，较高的将在下限之前被禁用，反之亦然。而且我认为这是通常的UX，用于防止用户选择值范围比选择的下限更低的范围的上限。

使用webpack编译脚本后，首先单击选择框，我在 Class FormHandler {类之前的一行上看到错误。

TypeError: Cannot call a class as a function
    at _classCallCheck (FormHandler.js:4)
    at HTMLDocument.FormHandler (form.js:34)

接下来的点击非常完美，错误消失了。

我已经为webpack提供了全局underscore和jquery变量。因此，我不需要在模块中显式导入它们。

我对这个问题做了什么： 1.在没有webpack的情况下检查了该代码，但在包含类的纯js文件中-可以正常工作。 2.尝试将静态函数更改为普通函数，并在new中使用common.js关键字实例化类-没有结果，并且出现相同的错误。 3.浏览了互联网，只看到基于反应的答案。

// common.js

'use strict';

import FormHandler from './Forms/Helpers/FormHandler';

$(function(){
    FormHandler.optionsRangeBoundsAdjust();
});

// FormHandler.js

"use strict";

class FormHandler {
    /**
     * Adds to the selected option the "selected" attribute.
     */
    static selectOptionsAdjust () {
        $('select').on('change', e => {
            let $select = $(this);
            var $val = $select.val();

            _.each($select.children(), val => {
                let $theOption = $(val);

                if ($theOption.attr('selected') === 'selected') {
                    $theOption.removeAttr('selected');
                }

                if ($val === $theOption.val()) {
                    $theOption.attr('selected', 'selected');
                }
            });
        });
    }

    /**
     * Forbids to choose lower values in the high bound of the range than
     * the value that has been selected in the lower bound of the range.
     * Relates to the connected select tags, i.e. ranges.
     */
    static optionsRangeBoundsAdjust () {
        let $ranges = _.map($('form .range'), val => $(val));

        _.each($ranges, $range => {
            let $rangeLowSelectNode = $range.find('.range-scale-low select').eq(0);
            let $rangeHighSelectNode = $range.find('.range-scale-high select').eq(0);

            $rangeLowSelectNode.on('change', _.partial(setHighRangeAvailability, $rangeHighSelectNode));
            $rangeHighSelectNode.on('change', _.partial(setLowRangeAvailability, $rangeLowSelectNode));
        });
    }
}

export default FormHandler;

我希望它从第一个CHANGE事件到选择框都不会出错，因为我不知道为什么它只发生一次然后消失。

解决方案（仅针对具体情况）

FormHandler.js 在selectOptionsAdjust()的行中带有let $select = $(this);，应将其替换为let $select = $(e.target);并避免使用this。 / p>

P.S。也许我需要以某种方式深入了解this ...

Answer 1

很可能与您的代码无关，而与您的Webpack配置有关。
也许避免在FormHandler.js中使用类会有所帮助：

// FormHandler.js
function selectOptionsAdjust () { ... }

function optionsRangeBoundsAdjust () { ... }

export { selectOptionsAdjust, optionsRangeBoundsAdjust };

// common.js
import * as FormHandler from './Forms/Helpers/FormHandler';

$(function(){
    FormHandler.optionsRangeBoundsAdjust();
});

如何修复另一个“无法将类作为函数调用”（非响应）

解决方案（仅针对具体情况）

1 个答案: