天上的星星

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

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

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

<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或者空字符串表示要绑定点击事件的为当前domclickDefaultNumer: 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');});});

最后来张脑残截图

学习会使你永远立于不败之地。