如何使用标签的内部文本<a>来相应地操作定向页面？

Question

我有两个HTML文件:索引和类别。在index.html上，我使用javascript函数创建了类别列表，并添加了标签，将用户引导到categories.html(所有链接都具有相同的href属性)。我想根据前一页点击标签的内部文本更改categories.html的内容。

我使用localStorage来存储所有类别名称，但我不知道如何使用这些名称来获取相应的category.html当我不知道哪个标签将用户定向到category.html。如何检测已点击的链接?

我正在分享元素创建&localStorage代码，以防问题可以在该代码中修复:

import { fetchData, createListItem} from "../Utils.js";
// List Categories
const createHeroCategories = () => fetchData("https://www.themealdb.com/api/json/v1/1/categories.php")
.then((data) => {
data.categories.forEach((category) =>
createListItem(".categories-list", category["strCategory"], "category-item")
);
Array.from(document.getElementsByClassName('category-item')).forEach(element => {
let temp = element.innerText;
element.innerHTML = `<a href="./pages/categories.html">${temp}</a>`;
localStorage.setItem(`${temp}`, temp);
})
})
.catch((e) => alert(e.message));
export {createHeroCategories};

Answer 1

通过添加onclick函数解决了这个问题，该函数将内部文本分配给一个名为"clickedItem"的变量。如果单击另一个标记，它将更改存储的值。我想出了这个解决方案"settitem";方法可用于更改/覆盖同一变量的旧值。该值将在用户访问index.html时存储，就在被定向到categories.html之前。

Array.from(document.getElementsByClassName('category-item')).forEach(element => {
let temp = element.innerText;
element.innerHTML = `<a onclick="localStorage.setItem('clickedItem','${temp}');" 
href="./pages/categories.html">${temp}</a>`;
})

这样，"click "可以在categories.html中调用，并通过使用如下模板字面值来获取:

let clickedItem = localStorage.getItem("clickedItem")
let API = `https://www.themealdb.com/api/json/v1/1/filter.php?c=${clickedItem}`
fetch(API).then(...).catch(...)