javascript - jQuery 以编程方式更改 slider 值

Question

我当前将元素列表编译到数组中，然后分配单击事件，或者如果该元素是 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);

正如您在上面看到的，如果元素是 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(_));
}

现在，我要么将单击事件分配给控件内的元素，要么创建一个 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')之前确实尝试过这个，所以我只是输入了错误的名称-_-