通过向my array.prototype添加函数,使用纯javascript筛选范围滑块
我有一个填充了动物的表,需要按人口对它们进行过滤,我想使用一个范围滑块来过滤它们,而不使用jQuery,只使用普通javascript,已经有2个使用array.prototype的过滤器。以下是我的html代码:通过向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=
<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;
}