jquery - <p> 标签不显示在嵌套的 div 层中

Question

我的 <p>标签不会显示在嵌套的 div 层中，我不确定问题是来自 1) 我的 css 样式表还是 2) 我生成 <p> 的方式标签或 3) 完全不同的东西。

我的 index.html 设置为:

<div id="container">
  <div id="header"></div>
  <div id="wrapper">
    <div id="chart"></div> /* contains an svg */
    <div id="questions"></div> /* contains p tags */
    <div id="tables"></div> /* contains html tables */
  </div>
</div>

我已将一个 js 文件链接到索引页。 js 文件使用 d3 和 jquery。在 js 文件中，我试图做到这一点，以便当您单击 SVG 的元素时，关联的文本会出现在 #questions div 层中。代码如下所示:

node.append("circle")
  .attr("r", function(d) { return d.r; })
  .on("click", function(d,i) {
    // text = d.data.topics;
    array = d.data.topics;
    var i=1;
    array.forEach(function(question){
      index="q"+i;
      $("#tables").append("<p>"+question[index]+"</p>");        
      i++;
    });
  });

实际情况是，当您单击 SVG 中的元素时，<p>生成标签并将其附加到 #questions层，但它们在 #questions 中不可见分区层。 <p>标签只有在放置在 #questions 之外时才会显示分区层；例如，如果我将它们附加到 #container分区层。

我有一个链接的 css 文件，它按如下方式设置 div 层的样式:

#container {
 width: 1080px;
 height: 800px;
 border: none;
 overflow: hidden;
 position: absolute;
 border: 1px solid #000;
}

#wrapper{
 position: absolute;
 width: 100%;
 height: 80%;
 border: 1px solid #000;
}

#header{
 position: relative;
 height: 20%;
 width: 100%;
}

#chart{
 position: relative;
 width: 50%;
 height: 100%;
 float: left;
 overflow: hidden;
 border: 1px solid #000;
}

#questions{
 width: 50%;
 height: 50%;
 position: relative;
 left: 50%;
 vertical-align: top;
 border: 1px solid #000;
}

#tables{
 position: relative;
 width: 50%;
 height: 50%;
 left: 50%;
 border: 1px solid #000;
}

#container #wrapper #questions p {
  height: 100%;
  width: 100%;
  font-family: sans-serif;
  color: #000;
}

Answer 1

您的语法不正确<div="tables'> .您需要添加 class或 id ，在你的情况下你会想要 <div id="tables"> .为你所有的 div 做这个