0

このコードに問題があります。「追加されたテキスト」を2回クリックすると、「hello2」のコンテンツと「hello3」のコンテンツの2つのdivが表示されますが、一部のresoneをクリックすると、同じブロックが開きます。 。それぞれが自分のブロックを開くようにするのではなく（動的に作成したままにしておきたい）、助けてくれてありがとう

<!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>
4

1 に答える 1

2

問題は、変数kがグローバルであるということです。変更されると、イベントハンドラーはすべて同じ値（最初に2、次に3、次に4など）を参照します。

次のようにイベントハンドラーを設定します。

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

要素を追加する関数内で「準備完了」ハンドラーを使用する理由はまったくありません。

于 2013-01-01T16:05:55.647 に答える