Question

我的代码有问题：如果您单击“附加文本”两次，您将得到2个div，其中一个内容为“hello2” 和一个“hello3”，但是当你点击它们时，它们会打开同一个块。让每个人都打开自己的街区。（我想保持动态创建。）感谢您的帮助

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
var k=1;
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
function appendText()
{
  k=k+1;
  var css = '#flip'+k+' { padding:5px; text-align:center; background-color:#ffff00;   border:solid 1px #c3c3c3;}',
  head = document.getElementsByTagName('head')[0],
  style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }

  head.appendChild(style);

  var css = '#panel'+k+'{padding:50px;display:none;text-align:center; background-   color:#'+k+''+k+''+k+''+k+''+k+''+k+'; border:solid 1px #c3c3c3;}',
  head = document.getElementsByTagName('head')[0],
  style = document.createElement('style');
  style.type = 'text/css';
  if (style.styleSheet){
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
  head.appendChild(style);

  var flip2 = document.createElement("div");
  flip2.innerHTML = "Hello"+k;
  flip2.id = ("flip"+k);

  var panel2= document.createElement("div");
  panel2.innerHTML = "Hello"+k;
  panel2.id = ("panel"+k);

  document.body.appendChild(flip2);
  document.body.appendChild(panel2);

  $(document).ready(function(){
    $(("#flip"+k)).click(function(){
      $(("#panel"+k)).slideToggle("slow");
    });
  });
}
</script>

<style type="text/css"> 
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<button onclick="appendText()">Append text</button>


<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

</body>
</html>

Answer 1

问题是您的变量k是全局。当它发生变化时，你的事件处理程序都会看到相同的值（先是2，然后是3，然后是4等）。

设置这样的事件处理程序：

(function(kk) {
  $(("#flip"+kk)).click(function(){
    $(("#panel"+kk)).slideToggle("slow");
  });
})(k);

没有理由在添加元素的函数内部使用“ready”处理程序。

动态使用jQuery和样式

1 个答案: