Question

我目前将元素列表编译成数组，然后分配单击事件，或者如果Element是jQuery Slider，我将函数添加到slide属性。

this.monthly_controls = [];
(function() {
    const controls = document.querySelectorAll('[data-calculator-amount="finance-calculator"]');
    if (controls.length <= 0)
        return fatal_error('No Borrow Amount Controls');

    for (var i = 0; controls.length > i; i++) {
        var slider = false;
        if (controls[i].dataset.calculatorAmountSlider !== undefined) 
            slider = true;

        this.monthly_controls.push({
            slider: slider,
            element: controls[i],
            minus: controls[i].getElementsByClassName('term-minus')[0],
            plus: controls[i].getElementsByClassName('term-plus')[0],
            input: controls[i].getElementsByTagName('input')[0]
        });
    }
}).call(this);

正如您在上面所看到的，如果Element将是一个jQuery Slider，我只需将slider设置为true，可能会将其更改为以不同的方式进行检查，但那是无关的。

for(var i = 0; i < _.monthly_controls.length; i++) {
    const control = _.monthly_controls[i];
    // Add event listeners and stuff...

    if (control.slider) {
        (function ($, scope) {
            $(control.element).slider({
                range: "min",
                value: scope.borrow_value,
                min: 0,
                max: 20000,
                step: 500,
                slide: function (event, ui) {
                    adjust_partners(ui.value);
                    _.borrow_value = ui.value;
                }
            });
        })(jQuery, this);
        return;
    }

    control.plus.addEventListener('click', function() {
        const new_val = (_.borrow_value + step);

        _.borrow_value = new_val;
        adjust_partners();

    }.bind(_));
    control.minus.addEventListener('click', function() {
        const new_val = (_.borrow_value - step);

        _.borrow_value = new_val;
        adjust_partners();
    }.bind(_));
}

现在我要么将click事件分配给控件中的元素，要么创建一个jQuery Slider。

_将是插件的范围。

现在我在下面的代码中遇到的问题是在使用其他控件之一时设置Slider的值，我似乎无法访问Slider实例。

var adjust_partners = function() {
    for (var x = 0; x < _.monthly_controls.length; x++) {
        if (_.monthly_controls[x].slider) {

            (function ($, scope) {
                $(scope.monthly_controls[x].element).slider('value', scope.borrow_value);
            })(jQuery, this);

            return;
        }
        _.monthly_controls[x].input.value = _.borrow_value;
    }
}.bind(_);

$(scope.monthly_controls[x].element).slider('value', scope.borrow_value);什么都不做，尝试$(scope.monthly_controls[x].element).slider('value');只是转出以下内容：

Answer 1

发现此问题，您必须使用data()函数访问插件实例。

var adjust_partners = function() {
    for (var x = 0; x < _.monthly_controls.length; x++) {

        // Change slider value
        if (_.monthly_controls[x].slider) {
            (function ($, scope, x) {
                $(scope.monthly_controls[x].element).data('uiSlider').value(scope.borrow_value);
            })(jQuery, this, x);
            return;
        }

        // Change input value
        _.monthly_controls[x].input.value = _.borrow_value;
    }
}.bind(_);

在我做data('slider')之前我确实尝试了这个，所以我只是输错了名字-_-

jQuery以编程方式更改滑块值

1 个答案: