在 html 页面之间操作值

Question

我正在创建一个投资组合，在该投资组合中将有几张卡片，这些卡片的目的是将它们重定向到另一个包含详细信息的页面。这就是问题出现的地方，而不是为每个卡片创建一个 html 页面，而不是只制作一个页面，并在点击 js 时更改每张卡片之间的值不是有利的吗？ 一个伙伴告诉我，react有一个rounter属性，可以做到这一点，但是这个项目现在很简单，我想用js解决这个问题。 下面是一个单独的示例(不属于主项目)： 主页：

<a href="/pagina2.html" id="a1">Aqui</a>
<a href="/pagina2.html" id="aa">Teste</a>

第 2 页

<div id="main">
<h1 id="title">Lindo</h1>
</div>

Js

let a1 = document.getElementById('a1');
var aa = document.getElementById('aa');
var h1 = document.querySelector('#title');
var main = document.getElementById('main');

if (onclick == a1) {
title.innerText = "Leandro O cachorro";
main.style.backgroundColor = 'green';
}else if(onclick == aa){
console.log('era pra estar vermelho');
title.innerText = "Belle Belinha";
main.style.backgroundColor = 'red';
}

我尝试使用 if-else 句子，但它只需要第一个 if，即使单击链接 2

Answer 1

而不是为每张卡创建一个 html 页面，而不是只制作一个页面，并在点击 js 时更改每张卡之间的值不是很有利吗？

当然，每个人都喜欢这种方式。

坦率地说，这是可能的，但你不能只用上面显示的内容来实现这一点。我认为你不能以这种方式实现你想要的。

因此，相反，我会建议您使用react。如果您不喜欢它，请查看下面的替代方案。

---

如果您认为react矫枉过正，可以尝试更简单的解决方案：static site generator。检查：Hugo、Jekyll、Eleventy等...这些方法可帮助您专注于网站建设，而不是架构和技术建设。

如果你想要一个更轻量级的解决方案，并且喜欢做更多的事情，那么选择一个bundler，如webpack，rollup，parcel等......然后应用模板库，如Handlebar JS，Mustache JS，Liquid JS，EJS等。这种方法会给你更多的机会去做低级的东西和超轻量级的东西。

最后，从头开始构建所有内容。 是的，仍然有可能，但可以肯定，除非你知道大多数事情，知道去哪里，做什么。

Answer 2

我能想到的唯一一个技巧是在不同页面之间交换信息，同时只使用前端javascript： 您可以使用末尾的参数链接到其他页面： 即：myUrl + "?myParameter1=myValue1&myParameter2=myValue2"

现在，在第二页上，您可以使用以下方法检索这些参数：

var url = new URL(window.location.href);
url.searchParams.get("myParameter1"); // "myValue1"
url.searchParams.get("myParameter2"); // "myValue2"
//...

。根据传递的参数，您现在可以在页面上显示不同的内容，甚至可以通过链接添加书签甚至共享(作为一个不错的 sideffect)。

编辑：抱歉，我可能误解了您的问题，但也许这可以帮助您找到替代解决方案(至少您不必为每张卡片制作一个新的html页面，只需一张)。