通过向my array.prototype添加函数,使用纯javascript筛选范围滑块

通过向my array.prototype添加函数,使用纯javascript筛选范围滑块,javascript,filter,Javascript,Filter,我有一个填充了动物的表,需要按人口对它们进行过滤,我想使用一个范围滑块来过滤它们,而不使用jQuery,只使用普通javascript,已经有2个使用array.prototype的过滤器。以下是我的html代码: <fieldset> <legend>Search by population</legend> <input id="populationSlider" class="range-slider__range" type=

我有一个填充了动物的表,需要按人口对它们进行过滤,我想使用一个范围滑块来过滤它们,而不使用jQuery,只使用普通javascript,已经有2个使用array.prototype的过滤器。以下是我的html代码:

    <fieldset>
    <legend>Search by population</legend>
  <input id="populationSlider" class="range-slider__range" type="range" value="100" min="194" max="500000" onchange="updateSliderNumber('populationNumber', this.value);">
    <input id="populationNumber" type="number" value="100" min="194" max="500000" onchange="updateSliderNumber('populationSlider', this.value);">
  <span class="range-slider__value"></span>
</fieldset>
Ant建议?我需要调用另一个函数,还是扩展prototype.array?
提前谢谢你

不,这与
Array.prototype
无关。不,你不应该扩展它。什么东西不能像预期的那样工作?(提示:应用一个过滤器或另一个过滤器,但不能同时应用两者)不,这与
数组.prototype
无关。不,你不应该扩展它。什么东西不能像预期的那样工作?(提示:您可以应用一个筛选器或另一个筛选器,但不能同时应用这两个筛选器)
(function(document) {

    var AnimalFilter = (function(Arr) {

        var _input;
    var _select;

        function _onInputEvent(e) {
            _input = e.target;
            var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
            Arr.forEach.call(tables, function(table) {
                Arr.forEach.call(table.tBodies, function(tbody) {
                    Arr.forEach.call(tbody.rows, _filter);
                });
            });
        }

        function _onSelectEvent(e) {
            _select = e.target;
            var tables = document.getElementsByClassName(_select.getAttribute('data-table'));
            Arr.forEach.call(tables, function(table) {
                Arr.forEach.call(table.tBodies, function(tbody) {
                    Arr.forEach.call(tbody.rows, _filterSelect);
                });
            });
        }

        function _filter(row) {

            var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';

        }

        function _filterSelect(row) {

            var text_select = row.textContent.toLowerCase(), val_select = _select.options[_select.selectedIndex].value.toLowerCase();
            row.style.display = text_select.indexOf(val_select) === -1 ? 'none' : 'table-row';

        }

        return {
            init: function() {
                var inputs = document.getElementsByClassName('table-filter');
                var selects = document.getElementsByClassName('select-table-filter');
                Arr.forEach.call(inputs, function(input) {
                    input.oninput = _onInputEvent;
                });
                Arr.forEach.call(selects, function(select) {
         select.onchange  = _onSelectEvent;
                });
            }
        };
    })(Array.prototype);

    document.addEventListener('readystatechange', function() {
        if (document.readyState === 'complete') {
            AnimalFilter.init();
        }

    });


})(document);

// Range-slider
function updateSliderNumber(id, value){
    document.getElementById(id).value = value;
}