动态添加toggle疑问

Question

界面:
<div id="test1"></div>
希望的效果是，循环添加三个表格
一
表格一
二
表格二
三
表格三 点击"一",,"表格一"隐藏和显示相互切换
 点击"二",,"表格一"隐藏和显示相互切换
……
我这样写 不管点哪个 都只有表格三在显示隐藏切换 求大家帮忙更改    for (i = 0; i < 3; i++) {
            $("#test1").append("<div id='out" + i + "'><h2 id='title" + i + "'>" + i + "</h2>");            var tableHtml = "";
            tableHtml += "<table id='table" + i + "'>";
            tableHtml += "<tr>";
            tableHtml += "<td>一</td>";
            tableHtml += "<td>二</td>";
            tableHtml += "<td>三</td>";
            tableHtml += "</tr>";
            tableHtml += "</table>";            $("#out" + i).append(tableHtml);
            $("#test1").append("</div>");
            $("#title"+ i).toggle(
            function() {
                    $("#table" + i).css("display", "none");
            },
            function() {
                    $("#table" + i).css("display", "block");
            }
            ); 
        }

Answer 1

    for (i = 0; i < 3; i++) {
            $("#test1").append("<div id='out" + i + "'><h2 id='title" + i + "'>" + i + "</h2>");            var tableHtml = "";
            tableHtml += "<table id='table" + i + "'>";
            tableHtml += "<tr>";
            tableHtml += "<td>一</td>";
            tableHtml += "<td>二</td>";
            tableHtml += "<td>三</td>";
            tableHtml += "</tr>";
            tableHtml += "</table>";            $("#out" + i).append(tableHtml);
            $("#test1").append("</div>");
            $("#title"+ i).toggle(
            function() {
                    var k = this.innerHTML;
                    $("#table" + k).css("display", "none");
            },
            function() {
                    var k = this.innerHTML;
                    $("#table" + k).css("display", "block");
            }
            ); 
        }

Answer 2

这里居然不支持颜色,服了!
for (i = 0; i < 3; i++) {
            $("#test1").append("<div id='out" + i + "'><h2 id='title" + i + "'>" + i + "</h2>");            var tableHtml = "";
            tableHtml += "<table id='table" + i + "'>";
            tableHtml += "<tr>";
            tableHtml += "<td>一</td>";
            tableHtml += "<td>二</td>";
            tableHtml += "<td>三</td>";
            tableHtml += "</tr>";
            tableHtml += "</table>";            $("#out" + i).append(tableHtml);
            $("#test1").append("</div>");
            $("#title"+ i).toggle(
            function() {
                    var k = this.innerHTML;
                    $("#table" + k).css("display", "none");
            },
            function() {
                    var k = this.innerHTML;
                    $("#table" + k).css("display", "block");
            }
            ); 
        }

Answer 3

动态添加的话，一定要注意追加事件，当生成之后才能追加事件，否则会出现错误，生成之后比如toggle(test1,test2);//这两个函数是自定义的，再生成之前添加事件是没有效果的