动态内容 - 用户交互时的交换内容

Question

我刚刚开始使用JavaScript。这就是我想要做的事情：

我想建立一个网站，让我们说一下足球。当用户登陆网站时，他或她将看到关于足球的默认文本。用户现在有机会使用4个按钮：

按钮1：粉丝 | 按钮2：不是足球迷 | 按钮3：长 | 按钮4：短 |

按钮1和2将相应地更改内容。因此，有一个为非粉丝写的文本和一个为粉丝（和默认粉丝）写的文本。

按钮3和4会将内容的长度更改为当前文本的短或长副本。因此，如果用户选择＆＃34;粉丝＆＃34;和＆＃34;短＆＃34;默认内容将更改为粉丝书写文本的简短版本。

我希望我能清楚地解释清楚。现在从我的研究中我发现我可以使用这样的东西：

document.getElementById("content").innerHTML = "I am individualized   content."

但这真的是要走的路吗？此外，我的研究表明react.js可能是最好用的。

我不是在寻找现成的解决方案。如果可能的话，我希望有人能够以正确的方向指导我一些背景知识。

有什么建议吗？ :)谢谢。

Answer 1

由于您只需要指导正确的方向，因此您有以下几种选择：

1. 使用纯javascript
2. 使用jQuery
3. 使用React.js
4. 其他（例如Angular.js）

要使用纯JavaScript执行任务，您已找到正确的功能来更改内容。现在您需要做的就是有两个变量（用于保存短/长信息，另一个用于保存风扇/非风扇）。

通过使用这两个变量，您可以轻松找到点击了哪些按钮以及通过检查句子来加载哪些内容。