javascript - 在 javascript 中显示/隐藏 html 内容

Question

我有来自后端的响应。现在我想创建一些链接，如果我单击这些链接，它应该在该链接下方显示 html 内容，如果我再次单击该链接，那些 html 内容应该会消失。我知道 jquery hide() 和 show() 。但是在这里我使用 for 循环并且我无法找到 DOM 元素，如下所示，

var html = "<div id=finalDiv></div>";
$("#finalDiv").dialog();
var ht;
for(var i in response) {
  ht +="<table><tr><td><label>A:</label></td><td><a onclick=\"showOneLink('"+response[i].B+"','"+i+"')\" >'"+response[i].A+"'</a></td></tr>";
  ht += "<tr><td><div id=show'"+i+"'Link style='dislay:none;'></div></td></tr></table>";
}
$("#finalDiv").append(ht);

现在，当我单击 showOneLink 时，应该会显示隐藏的 div，但不会创建该 div 的 DOM。作为 ，

function showOneLink(B,i) {
  var htm = "<b>log:'"+B+"'</b>";
  $("#show"+i+"Link").css('display','block');
  $("#show"+i+"Link").append(htm);
}

Answer 1

问题是这个 id 属性：

id=show'"+i+"'Link

这将产生无效的 HTML： id=show'5'Link

将其更改为：

ht += "<tr><td><div id='show"+i+"Link' style='dislay:none;'></div></td></tr></table>";

也使用toggle()代替css()：

 $("#show"+i+"Link").toggle();

Answer 2

选择器是字符串，关闭“”

喜欢$("#show"+i+"Link");

或孔代码：

function showOneLink(B,i) {
  var htm = "<b>log:'"+B+"'</b>";
  $("#show"+i+"Link").css('display','block');
  $("#show"+i+"Link").append(ht);
}

并更好地使用切换：

    $("#show"+i+"Link").append(ht);
    $("#show"+i+"Link").toggle();