На этой странице https://fantasy.premierleague.com/a/squad/transfers есть выпадающий список, где вы можете выбрать максимальную цену игрока.Затем он фильтрует таблицу ниже, чтобы показать только игроков с ценой, равной или меньшей выбранной максимальной цены.С моим расширением Chrome я добавил две кнопки, которые изменяют выбранную опцию
/**
* Increases the price of the /transfers maximum price filter.
*/
function increasePrice() {
const priceFilter = document.getElementById('ismjs-element-price');
if (priceFilter.selectedIndex === 0) return;
priceFilter.selectedIndex -= 1;
priceFilter.dispatchEvent(new Event('change'));
}
/**
* Decreases the price of the /transfers maximum price filter.
*/
function decreasePrice() {
const priceFilter = document.getElementById('ismjs-element-price');
if (priceFilter.selectedIndex === priceFilter.options.length - 1) return;
priceFilter.selectedIndex += 1;
priceFilter.dispatchEvent(new Event('change'));
}
/**
* Adds the increase and decrease price buttons for filtering players by the their maximum price to
* the /transfers sidebar.
*/
function addPriceButtons() {
const priceDiv = document.getElementById('ismr-price');
if (priceDiv.classList.contains('price-filter')) return;
priceDiv.className += ' price-filter';
const increaseButton = document.createElement('div');
const decreaseButton = document.createElement('div');
increaseButton.className = 'price-change-button grid-center';
increaseButton.textContent = '+';
increaseButton.onclick = increasePrice;
decreaseButton.className = 'price-change-button grid-center';
decreaseButton.textContent = '-';
decreaseButton.onclick = decreasePrice;
priceDiv.insertAdjacentElement('beforeend', increaseButton);
priceDiv.insertAdjacentElement('beforeend', decreaseButton);
}
, которая, кажется, работает нормально, как показано в GIF ниже
![enter image description here](https://i.stack.imgur.com/puMkL.gif)
Проблема в том, что он фактически не меняет игроков, показанных в таблице.Я думал, что, добавив
priceFilter.dispatchEvent(new Event('change'));
, это будет работать нормально.Я также пробовал «щелкать» и «вводить», но эти события тоже ничего не делают.
![enter image description here](https://i.stack.imgur.com/dlX94.png)
Я также проверилselect
элемент в Chrome, чтобы увидеть, какие слушатели событий у него есть, и если бы я мог, возможно, понять это.К сожалению, код минимизирован, поэтому я не могу точно сказать, что делать.
Я что-то упустил?Где я должен узнать, как таблица фильтруется в первую очередь и как я могу вызвать это сам?