我想找出一种方法来添加在评论系统的切换。当点击加号/减号时，它应该隐藏/显示内容。我试着调整我在网上找到的一些解决方案，但没有一个适合我。我目前有一个添加评论并在有序列表中显示它们的函数，但是切换函数不适合我。我怎么做才能让它起作用呢?
<script>
var ans = [];
function postcomments() {
var fname = document.getElementById("fname").value;
var msg = document.getElementById("msg").value;
var lastpos = ans.length;
var current = new Date();
console.log(current);
var time=current.getHours()+":"+(current.getMinutes()<10?'0':'') + current.getMinutes();
var date=current.getDate()+"."+(current.getMonth()+1)+"."+current.getFullYear();
ans[lastpos] = '<img src="Media/minusicon.png" onclick="toggle(document.getElementById("txt");)" style="width:8%;" class="plusminusicon">' + " "+" Sent by"+" " +'<a href="#.html">'+ fname +'</a>'+ " "+ " on" +" " +date+ " "+ "at" +" "+time +'<br>' +'<span class="txt">'+ msg +'</span>'+'<br>'+'-------------------------------';
var ol = document.getElementById("showcomments");
ol.innerHTML = "";
for (var i = 0; i < ans.length; i++) {
ol.innerHTML += "<li id="+(i+1)+">" + ans[i] + "</li>";
}
}
function toggle(x) {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
FIRST OF ALL…
我注意到你有两个"txt"类和id。这有点错误和奇怪。ID只能用于一个HTML元素.
之后…
尝试更改这一行:
<script>
ans[lastpos] = '<img src="Media/minusicon.png" onclick="toggle(document.getElementById("txt");)" style="width:8%;" class="plusminusicon">' + " "+" Sent by"+" " +'<a href="#.html">'+ fname +'</a>'+ " "+ " on" +" " +date+ " "+ "at" +" "+time +'<br>'
+'<span class="txt">'+ msg +'</span>'+'<br>'+'-------------------------------';
</script>
:
显然你必须先解决ID和类名的问题。
我想你可以用">
来改变'
字符，没有问题
<script>
ans[lastpos] = `<img src='Media/minusicon.png' onclick='toggle(document.getElementById('txt'))' style='width:8%;' class='plusminusicon'> Sent by <a href='#.html'>${fname}</a> on ${date} at ${time}<br><span class='txt'>${msg}</span><br>-------------------------------`;
</script>
注意:${fname}此模式用于防止字符串在连接变量时被+号填充。然而，这是不必要的。
首先你指的是"txt"当它是一个类时，通过getElementById。你应该给它一个ID，并添加一些唯一标识符对它，比如lastposID必须是唯一的，这样代码才能正常工作。如果没有输出的HTML很难判断，但这可能也适用于fname和msg。
其次，在onclick引号内调用getElementById("txt")。你必须用">来代替它们否则浏览器会认为这是onclick语句的结束。如果你把分号用作参数，也要去掉它末尾的分号。
应该是这样的
ans[lastpos] = '<img src="Media/minusicon.png" onclick="toggle(document.getElementById("txt"))" style="width:8%;" class="plusminusicon">' + " "+" Sent by"+" " +'<a href="#.html">'+ fname +'</a>'+ " "+ " on" +" " +date+ " "+ "at" +" "+time +'<br>' +'<span id="txt'+lastpos+'">'+ msg +'</span>'+'<br>'+'-------------------------------';
有更优雅的方法来解决这个问题，但我认为与上述修改你的代码应该工作