[JQuery]Dom循环点击处理插件DomClickRange

Web交互中，有种很常见的情况就是，当某个dom被第一次点击时，执行某种操作，第二次被点击时，执行另一种操作……第N次被点击时，执行第N种操作，当N+1时，有开始执行第一种操作，如此往复循环……

就这么一个dom的重复点击事件我也能无聊到做个插件出来，当真脑残，但既然做出来了，那就再次记录下，记录自己的脑残人生！

PS：此插件基于JQuery，以下是相关代码，其中参数methodName可以不传，此时表示对dom进行click事件绑定，如果传入非空字符串，则表示要执行相应的方法，暂时该插件只提供了一个执行第几个动作的方法

        $.fn.domClickRange = function (arg, methodName) {
            /// <summary>用于处理循环的点击动作</summary>
            /// <param name="arg">请求参数.clickEvent传递的参数clickDom对应当前被点击的dom对象;clickNumber对应当前的点击动作为设定的GroupRange中的第几个点击动作，从0开始计算</param>
            /// <param name="methodName">要执行的方法</param>
            if (typeof methodName === "string" && $.trim(methodName) != "") {
                switch (methodName) {
                    case "clickImmediately"://立刻执行第几个点击动作,可用于批量执行dom操作
                        var clickNumber = ~~arg;
                        $(this).each(function () {
                            var arg = $(this).data('domClickRangeArg');
                            if (arg != null && typeof arg.clickEvent === "function") {
                                var clickItem = getClickItem(this, arg);
                                clickItem.data("clickNumber", clickNumber - 1 >= 0 ? clickNumber - 1 : arg.clickGroupRange - 1);
                                clickItem.click();
                            }
                        });
                        break;
                }
            }
            else {//执行初始化
                var setting = {
                    clickSelector: null,//要绑定点击动作的selector,如果传入null或者空字符串表示要绑定点击事件的为当前dom
                    clickDefaultNumer: 0,//默认为第几次点击动作
                    clickGroupRange: 2,//设定多少次点击动作为一组点击动作，即点击多少次为一轮
                    clickEvent: function (clickDom, clickNumber) { } //dom被点击时要触发的函数
                };
                arg = $.extend({}, setting, arg);
                arg.clickDefaultNumer = ~~arg.clickDefaultNumer;//取整
                arg.clickGroupRange = ~~arg.clickGroupRange;//取整
                $(this).data('domClickRangeArg', arg);
                $(this).each(function () {
                    var clickItem = getClickItem(this, arg);
                    clickItem.data("clickNumber", arg.clickDefaultNumer);
                    clickItem.click(function () {
                        var prevClickNumber = ~~$(this).data("clickNumber");//之前的点击标志
                        var nowClickNumber = ~~((prevClickNumber + 1) % arg.clickGroupRange);
                        $(this).data("clickNumber", nowClickNumber);
                        if (typeof arg.clickEvent === "function") {
                            arg.clickEvent(this, nowClickNumber);
                        }
                        return false;
                    });
                });
            }
            function getClickItem(dom, arg) {
                var clickItem = $(dom);
                if (typeof arg.clickSelector === "string" && $.trim(arg.clickSelector) != "") {
                    clickItem = $(dom).find(arg.clickSelector);
                }
                return clickItem;
            }
        };

以下是测试用的demo

html部分如下，bt_Button为要绑定点击事件的按钮，sp_Number用于显示当前是第几次点击，bt_Immediately用于执行clickImmediately方法，ipt_Number用于传入要离可以执行的点击顺序编号

    <div>
        <input type="button" id="bt_Button" value="Click" /> nowClickNumber:<span id="sp_Number"></span>
    </div>
    <div><input type="button" id="bt_Immediately" value="ClickImmediately" /><input type="text" id="ipt_Number" value="12" /></div>

用于测试的js代码如下

        $().ready(function () {
            $('#bt_Button').domClickRange({
                clickDefaultNumer: 9,
                clickGroupRange: 15,
                clickEvent: function (clickDom, clickNumber) {
                    console.info($(clickDom).attr('id') + clickNumber);
                    $('#sp_Number').html(clickNumber);
                }
            });
            $('#bt_Immediately').click(function () {
                $('#bt_Button').domClickRange($('#ipt_Number').val(), 'clickImmediately');
            });
        });

最后来张脑残截图