Question

使用工具提示构建一个滑块，通过拖动或单击加号/减号按钮移动滑块时显示更新的值。

它工作正常，但是当我点击加/减按钮后拖动拇指它会跳到另一个位置，而不是继续它的位置。如何修复它以反映最后一个值？这是小提琴：https://jsfiddle.net/2q1rg56z/12/。

var update_num = $('output').text() * 1;

$('.plus').on('click', function() {
    if (update_num < 100) {
        $('output').text(++update_num);
        $('input').val(update_num).trigger('input');
    } else {
        $('output').text(100);
    }
});

$('.minus').on('click', function() {
    if (update_num > 0) {
        $('output').text(--update_num);
        $('input').val(update_num).trigger('input');
    } else {
        $('output').text(0);
    }
});

（似乎最新的值应该存储在var中，那么最好的方法应该是什么呢？）

Answer 1

问题是这条线只运行一次：

var update_num = $('output').text() * 1;

你应该把它变成一个函数

var update_num = function() { return +$('output').text(); };

现在在你的代码中调用它：

if (update_num() < 100) {
  /***/
}

请参阅 updated fiddle

旁注：请注意我使用+将字符串转换为整数。请参阅http://www.jstips.co/en/converting-to-number-fast-way/

Answer 2

你自己几乎已经给出了答案。无论何时使用滑块，您都必须更新变量update_num。

在您的小提琴中，已有处理程序执行此操作：

$('.range-control > input').on('input', function() { 
    var value = this.value;
    //...

因此，您只需要提取update_num，这样就可以从滑块输入处理程序的范围访问它并将其设置为value。

我更新了小提琴以使其工作： https://jsfiddle.net/2q1rg56z/14/

如何更新反映当前值的输入值？

2 个答案: