国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > Dom循环点击处理插件

Dom循环点击处理插件

来源:程序员人生   发布时间:2015-03-10 08:22:47 阅读次数:2924次

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'); }); });

最后来张脑残截图


生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生