Dom循环点击处理插件

概述Web交互中，有种很常见的情况就是，当某个dom被第一次点击时，执行某种 *** 作，第二次被点击时，执行另一种 *** 作……第N次被点击时，执行第N种 *** 作，当N1时，有开始执行第一种 *** 作，如此往复循环……就这么一个dom的重复点击事件我也能无聊到做个插件出来，当真脑残，但既然做出来了，那就再次记录下，记录自己的

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

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

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

$.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,//设定多少次点击动作为1组点击动作，即点击多少次为1轮 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'); }); });

最后来张脑残截图

总结

以上是内存溢出为你收集整理的Dom循环点击处理插件全部内容，希望文章能够帮你解决Dom循环点击处理插件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。