Dom迴圈點擊處理外掛程式

標籤：jquery   js   

Web互動中，有種很常見的情況就是，當某個dom被第一次點擊時，執行某種操作，第二次被點擊時，執行另一種操作……第N次被點擊時，執行第N種操作，當N+1時，有開始執行第一種操作，如此往複迴圈……

就這麼一個dom的重複點擊事件我也能無聊到做個外掛程式出來，當真腦殘，但既然做出來了，那就再次記錄下，記錄自己的腦殘人生！

PS：此外掛程式基於JQuery，以下是相關代碼，其中參數methodName可以不傳，此時表示對dom進行click事件綁定，如果傳入非Null 字元串，則表示要執行相應的方法，暫時該外掛程式只提供了一個執行第幾個動作的方法

<span style="white-space:pre"></span>$.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或者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代碼如下

<span style="white-space:pre"></span>$().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');            });        });

最後來張腦殘

Dom迴圈點擊處理外掛程式