通过 stepUp 和 stepDown 输入数字自动改变值答案

【问题标题】：Input number auto change value by stepUp and stepDown通过 stepUp 和 stepDown 输入数字自动改变值
【发布时间】：2021-08-03 16:09:12
【问题描述】：

我有这个输入 type="number"

</div>
  <input id="data-filter" class="form-control form-control" type="number" value="2021"/>
</div>

我需要的是一个脚本，它使用 stepUp 和 stepDown 按钮将输入值从“2021”更改为“2022”，然后再次更改为“2021”。这是因为我有一个与该输入相关的函数，并且该函数不读取元素输入的默认值。仅当我再次用“2021”填充输入文本或使用 stepUp/stepDown 按钮时才会发生这种情况。

编辑：

我使用该输入在表格行中执行搜索，我需要在页面加载时仅过滤包含 2021 年的行。该功能效果很好，但在页面加载时使用默认值。所以我需要手动更改输入值。

过滤器：

$('#data-filter').on('load', function () {
    changeFilter.call(this, 'data');
});

函数changeFilter：

function changeFilter(filterName) {
    filters[filterName] = this.value;
    updateFilters();
}

更新过滤器功能：


function updateFilters() {
    $('.task-list-row').hide().filter(function () {
        var
            dataValue = $(this),
            result = true;

        Object.keys(filters).forEach(function (filter) {

            if (filters[filter] && (filters[filter] != 'Tutti') && !filters[filter].includes('-')) {
                result = result && dataValue.data(filter).toLowerCase().includes(filters[filter].toLowerCase())
            }
            else if (filters[filter] && (filters[filter] != 'Tutti') && filters[filter].includes('-')) {
                result = result && convertDate(filters[filter]) === dataValue.data(filter);
            }
            if (filters[filter] === '') {
                result = true;
            }
        });
        return result;
    }).show();
}

【问题讨论】：

标签： javascript html jquery input

【解决方案1】：

function setUp() {
    let dataValue = document.getElementById('data-filter').value;
    document.getElementById('data-filter').value = ++dataValue;
}

function setDown() {
    let dataValue = document.getElementById('data-filter').value;
    document.getElementById('data-filter').value = --dataValue;
}

【讨论】：

【解决方案2】：

function setUp()
{
    dataValue = document.getElementById('data-filter').value;
    document.getElementById('data-filter').value = ++dataValue;
}

function setDown()
{
    dataValue = document.getElementById('data-filter').value;
    document.getElementById('data-filter').value = --dataValue;
}

【讨论】：

是的，它确实会在页面加载时更改输入“数字”的值，但它不适用于搜索过滤器。我不知道为什么，但它似乎需要手动输入。有没有其他方法可以模拟？
因为我认为您声明了两次dataValue 一次在函数updateFilters 中，另一次在函数外
当然，我在代码中多次声明了 dataValue。我需要这样做才能使过滤器起作用（我也使用相关的过滤器）。