我正在尝试为我的学生编写一个教程，以网页的形式编写，其中包含隐藏的“剧透”，学生可以在考虑答案后取消隐藏。所以，长话短说，我正在寻找的行为是:
- 一开始，文本中出现了很多隐藏的单词；
- 当点击一段文本时，它就会出现，并且之后不会被覆盖；
- 这应该以最小的开销(不强制我安装复杂的框架)并且在我所有学生的机器上工作，即使浏览器已经过时，即使没有安装 jquery。
我搜索了现成的解决方案，但我检查的所有解决方案要么太复杂，要么不完全符合我的要求。所以我决定自己做。 到目前为止我所拥有的是:
<HTML>
<STYLE>
span.spoil {background-color: black;}
span.spoiled {background-color: white;}
</STYLE>
<HEAD>
<TITLE>SPOIL</TITLE>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8">
<!--LINK rel="Stylesheet" type="text/css" href=".css"-->
</HEAD>
<BODY>
This is a text with <span class="spoil" onclick="showspoil(this)">spoil data</span>.
<br>
<span class="spoil" onclick="showspoil(this)">Unspoil me.</span>
<br>
<span class="spoil" onclick="showspoil(this)">And me.</span>
<script>
function showspoil(e) {
e.className="spoiled";
}
// var classname = document.getElementsByClassName("spoil");
// for (var i = 0; i < classname.length; i++) {
// classname[i].addEventListener('click', showspoil(WHATEXACTLY?), false);
// }
</script>
</BODY>
</HTML>
它完成了这项工作，只是我发现必须为每个元素显式编写“onclick...”很烦人。因此，我尝试通过模仿在网络上找到的类似资源，为类的每个成员添加一个事件监听器:不幸的是，这部分(上面注释的代码)不起作用。特别是，我不知道应该将哪个参数传递给函数来传输“元素本身”。
有人可以帮忙吗？如果我可以偷懒的话，我更多的是寻找这个特定查询的答案，而不是寻找我应该学习的一系列类(class)的指针:我承认，我已经很久没有做 html 了，而且我确信我需要大量阅读才能再次提高效率:简单地说，我现在没有时间，而且我并不真正需要它:我只需要解决这个问题来建立一个可行的解决方案。
最佳答案
这里的问题是您正在调用该方法并分配它返回的内容以绑定(bind)为事件监听器
classname[i].addEventListener('click', showspoil(WHATEXACTLY?), false);
您可以使用闭包或直接调用该元素。
classname[i].addEventListener('click', function () { showspoil(this); }, false);
或
classname[i].addEventListener('click', showspoil, false);
如果直接调用，则需要将函数改为
function showspoil(e) {
this.className="spoiled";
}
另一种选择是不绑定(bind)每个元素上的点击，仅使用事件委托(delegate)。
function showspoil(e) {
e.className="spoiled";
}
document.addEventListener("click", function (e) { //list for clcik on body
var clicked = e.target; //get what was clicked on
if (e.target.classList.contains("spoil")) { //see if it is an element with the class
e.target.classList.add("spoiled"); //if it is, add new class
}
});.spoil { color: red }
.spoiled { color: green }This is a text with <span class="spoil">spoil data</span>.
<br>
<span class="spoil">Unspoil me.</span>
<br>
<span class="spoil">And me.</span>关于javascript - 使 html 类的所有元素对单击使用react，这将修改元素本身，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42724359/