Я видел этот пользовательский фильтр на этом сайте (который основан на MediaWiki), и хочу имитировать его функцию в фэндоме, который я использую для самообучения.
Код таблицы, с которой я играю, слишком длинный, поэтому я просто поместил его здесь .
[2019-05-15]
После того, как я изменил свой код на основе примера @ Kévin Bibollet, я столкнулся с новой проблемой.
Вот мой код js, только что добавил новую функцию в одну кнопку для тестирования.
//different types of data from the table
const type = document.querySelectorAll("tr td:nth-last-child(1)");
const kiwameStats = document.querySelectorAll("tr td:nth-last-child(2)");
//buttons
const tantouFilter = document.querySelector("div#Tantou");
const wakiFilter = document.querySelector("div#Wakizashi");
const tokuFilter = document.querySelector("div#Toku");
const kiwameFilter = document.querySelector("div#Kiwame");
//path for buttons' image
const waki = "https://vignette.wikia.nocookie.net/a-normal-playground/images/b/b8/Wakizashi.png";
const wakiClicked = "https://vignette.wikia.nocookie.net/a-normal-playground/images/1/1f/Wakizashi-full.png";
//bind events to buttons
wakiFilter.addEventListener("click", () => (filter(waki, wakiClicked, type)));
//general filter method
function filter(unclickedImageSrc, clickedImageSrc, data){
//store button's img and img's src for future use
currentImg = this.querySelector("img");
currentImgSrc = currentImg.getAttribute("src");
//is the button being clicked
isFiltered = (currentImgSrc === clickedImageSrc);
if(isFiltered){ //button was clicked, undo the filtering
currentImg.setAttribute("src", unclickedImageSrc);
for(i = 0; i < data.length; i++){
if(!data[i].innerHTML.includes(this.id)){
data[i].parentElement.style.display = " ";
}
}
}else{ //button isn't clicked, start filtering
currentImg.setAttribute("src", clickedImageSrc);
for(i = 0; i < data.length; i++){
if(!data[i].innerHTML.includes(this.id)){
data[i].parentElement.style.display = "none";
}
}
}
}
Когда я помещаю их в свой файл common.js и пробую его на тестовой странице , моя консоль сообщает Ошибка: ошибка синтаксического анализа JavaScript: ошибка синтаксического анализа: отсутствует) в скобках в файле 'Пользователь: somebody / common.js 'в строке 16 , которая является строкой, которая связывает прослушиватель событий с кнопкой
( wakiFilter.addEventListener ("click", () => (фильтр (waki, wakiClicked, введите))); )
Затем я бросил код в консоль и после нажатия кнопки получил:
TypeError: this.querySelector не является функцией .
Не уверен, что вызвало это. Я пишу свою функцию стрелки неправильно или ...?
[2019-05-14]
Я понял, как использовать addEventListener() для фильтрации определенных столбцов одним щелчком мыши. Добавлено две кнопки для целей тестирования:
//type filter
var type = document.querySelectorAll("tr td:nth-last-child(1)");
//for tantou
const tantouFilter = document.getElementById("Tantou");
tantouFilter.addEventListener("click", function(e){
for(i = 0; i < type.length; i++){
if(!type[i].innerHTML.includes(tantouFilter.id)){
type[i].parentElement.style.display = "none";
}
}
});
//for wakizashi
const wakiFilter = document.getElementById("Wakizashi");
wakiFilter.addEventListener("click", function(e){
wakiFilter.innerHTML = "[[File:Wakizashi-full.png|30px|link=]]";
for(i = 0; i < type.length; i++){
if(!type[i].innerHTML.includes(wakiFilter.id)){
type[i].parentElement.style.display = "none";
}
}
});
Во второй функции я одновременно пытался изменить изображение этой кнопки, но я получил:
До щелчка
После нажатия
А сейчас я хочу знать:
- Как изменить изображение кнопки при нажатии?
- Как отменить эту фильтрацию вторым нажатием на ту же кнопку?
И возможно ли переформатировать эту функцию фильтра, чтобы все кнопки могли использовать одну и ту же функцию?
Кстати, я использовал мой личный файл common.js для тестирования, потому что в общедоступном вики-файле Fandom common.js требуется время, чтобы они проверили его перед публикацией.
Если вы хотите поиграть с кодом, просто скопируйте и вставьте мой код в ваш личный файл common.js.