Javascript 动态使用jQuery和样式_Javascript_Jquery

Javascript 动态使用jQuery和样式

javascript jquery

Javascript 动态使用jQuery和样式,javascript,jquery,Javascript,Jquery,我对此代码有问题：如果你点击两次“appended text”，你会得到2个div，其中一个内容为“hello2” 还有一个是“hello3”，但对于某些共振，当你点击它们时，它们会打开相同的块。而不是让他们每个人打开自己的块。（我想保持动态创建。）感谢您的帮助 <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.

我对此代码有问题：如果你点击两次“appended text”，你会得到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>


var k=1；
$（文档）.ready（函数（）{
$（“#翻转”）。单击（函数（）{
$（“面板”）。滑动切换（“慢速”）；
});
});
函数appendText（）
{
k=k+1；
var css='#flip'+k+'{填充：5px；文本对齐：中心；背景色：#ffff00；边框：实心1px#c3c3c3；}'，
head=document.getElementsByTagName（'head'）[0]，
style=document.createElement（'style'）；
style.type='text/css'；
if（style.styleSheet）{
style.styleSheet.cssText=css；
}否则{
appendChild（document.createTextNode（css））；
}
头。附属物（样式）；
var css='#panel'+k+'{填充：50px；显示：无；文本对齐：居中；背景色：#'+k+'+k+'+k+'+k+'+k+'+k+'；边框：实心1px#c3c3c3；}，
head=document.getElementsByTagName（'head'）[0]，
style=document.createElement（'style'）；
style.type='text/css'；
if（style.styleSheet）{
style.styleSheet.cssText=css；
}否则{
appendChild（document.createTextNode（css））；
}
头。附属物（样式）；
var flip2=document.createElement（“div”）；
flip2.innerHTML=“你好”+k；
flip2.id=（“flip”+k）；
var panel2=document.createElement（“div”）；
panel2.innerHTML=“你好”+k；
面板2.id=（“面板”+k）；
document.body.appendChild（flip2）；
文件.正文.附件（第2小组）；
$（文档）.ready（函数（）{
$（“#翻转”+k））。单击（函数（）{
$（“#panel”+k））。滑动切换（“slow”）；
});
});
}
#面板#翻转
{
填充物：5px；
文本对齐：居中；
背景色：#e5eecc；
边框：实心1px#c3c3；
}
#面板
{
填充：50px；
显示：无；
}
这是一段
附加文本
单击以向下或向上滑动面板
你好，世界！

问题在于变量

是全局的。当它改变时，您的事件处理程序都会看到相同的值（先是2，然后是3，然后是4，等等）

按如下方式设置事件处理程序：

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

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

尝试演示变量

？@Nate就是为了让代码不起作用：-）为什么在处理DOM时混合使用jQuery和普通js？你明白了

是什么！