Dom循环点击处理插件
栏目：htmlcss时间：2015-03-10 08:22:47
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;
}
};
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');
});
});
最后来张脑残截图
------分隔线----------------------------
------分隔线----------------------------