jquery自定义插件，奇怪的bug解决思路

jquery自定义插件，奇怪的bug
JScript code
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>  
<script type="text/javascript">
(function ($) {
jQuery.fn.extend({
    //=====================================================================    
    //插件名称: foldList
    //功能说明: 折叠表格单元格中的li标签
    //输入参数: colIdx: int 类型, 从0开始, 需要折叠的list所在的列的索引
    //          showRowsNum: int类型, 折叠后显示行数(无此参数默认为显示3行); 
    //          spanGlobalFoldId:   string类型, 其它地方控制折叠的元素id(无参数则无, 有此参数但找不到则在表格第一行对应列创建此元素); 
    //          startIsFold: boolean类型, 最开始是否折叠(无此参数默认为折叠)
    "foldList": function (colIdx, showRowsNum, spanGlobalFoldId, startIsFold) {
        var $tab = this;
        if (typeof (showRowsNum) == "undefined") {
            showRowsNum = 1;
        }
        if (typeof (startIsFold) == "undefined") {
            startIsFold = true;
        }

        //清空原来的附加元素
        $tab.find("div.foldList").remove();

        var foldHtml = "<div class='foldList' style='width:100%;text-align:center;border-top:1 solid gray;' fold='0' ><img border='0' alt='-'></div>";
        $tab.find("tr").each(function () {
            //得到每一行的 指定列
            var $td = $(this).find("td:eq(" + colIdx + ")");
            var list = $td.find("li");
            if ($td.length == 0 || list.length <= showRowsNum) {
                return true;
            }
            var $listParent = list.parent();
            $td.append(foldHtml);

            $td.find("div.foldList").click(function () {
                var fold = $(this).attr("fold");
                $listParent.find("li:gt(" + (showRowsNum - 1) + ")").toggle(fold == "1");
                $(this).attr("fold", fold == "1" ? "0" : "1");

                if ($(this).attr("fold") == "0") {
                    $(this).find("img").attr("alt", "-");
                } else {
                    $(this).find("img").attr("alt", "+");
                }
            });
        });

        //如果有其它地方需要全局控制
        var spanGlobalHtml = "<span id='" + spanGlobalFoldId + "' fold='0' style='float:right;' ><img border='0' alt='-' ></span>";
        if (typeof (spanGlobalFoldId) != "undefined") {
            if ($("#" + spanGlobalFoldId).length == 0) {
                $tab.find("tr:first").children(":eq(" + colIdx + ")").append(spanGlobalHtml);
            }
            $("#" + spanGlobalFoldId).click(function () {
                debugger;
                var fold = $(this).attr("fold");
                $tab.find("div.foldList[fold='" + fold + "']").each(function () {
                    $(this).click();
                });
                $(this).attr("fold", fold == "1" ? "0" : "1");

                if ($(this).attr("fold") == "0") {
                    $(this).find("img").attr("alt", "-");
                } else {
                    $(this).find("img").attr("alt", "+");
                }
            });
        }

        if (startIsFold) {
            $("#" + spanGlobalFoldId).click();
        }
        return this;
    }
});
})(jQuery);
    //------------------- 调用 ---------------------
    $(function () {
        //页面加载， 还是可以用的
        $("#tableList").foldList(1, 1, "spanGlobalFold", true);
    });

    function test() {
        var tbodyHtml = "<tr><td>1</td><td style='cursor: pointer;'><ol><li>A</li><li style='display: list-item;'>B</li></ol></td></tr>";
        tbodyHtml += "<tr><td>2</td><td><ol><li>A</li><li style='display: list-item;'>B</li></ol></td></tr>";
        $("#tbodyList").html(tbodyHtml);
        // 再次绑定插件之后， 就有问题了---点击th上的全局控制图片， 似乎没有反应.
        // 经firebug跟踪， 所有相关的图片被执行了两次点击， 所以看起来没有反应。 
        // 实在不知道原因，请教各位大牛了。 
        $("#tableList").foldList(1, 1, "spanGlobalFold", false);
    }
</script>
</head>
<body>
    <table id="tableList" cellspacing="1" cellpadding="2" border="1" style="width: 200px;" >
        <thead><tr><th>名称</th><th>列表</th></tr></thead>
        <tbody id="tbodyList">
            <tr><td>1</td><td style='cursor: pointer;'><ol><li>A</li><li style='display: list-item;'>B</li></ol></td></tr>
            <tr><td>2</td><td><ol><li>A</li><li style='display: list-item;'>B</li></ol></td></tr>
        </tbody>
    </table>
    <input type="button" value="测试改动后的插件" onclick="test()" />
</body>
</html>
jquery自定义插件， 奇怪的bug解决思路

相关推荐

jquery自定义插件，奇怪的bug解决思路
